La guía definitiva de las pseudo-clases CSS
Si eres un principiante o un desarrollador de CSS con experiencia, es probable que hayas oído hablar de pseudo-clases. La pseudo-clase más conocida es probablemente :flotar, lo que nos permite diseñar un elemento cuando es en el estado de vuelo estacionario, es decir, cuando un dispositivo puntero, como un ratón, se apunta a él.
Siguiendo el concepto de nuestras publicaciones anteriores sobre margen: auto y CSS Flota, analizamos en profundidad las pseudo-clases en esta publicación. Veremos que son realmente las pseudo-clases, cómo funcionan, cómo podemos categorizarlos, y ¿En qué se diferencian de los pseudo-elementos?.
¿Qué son las pseudo-clases??
Una pseudo-clase es una palabra clave que podemos agregar a los selectores de CSS para definir un estado especial del elemento HTML perteneciente. Podemos agregar una pseudo-clase a un selector de CSS usando el sintaxis de colon : Me gusta esto: a: flotar …
Una clase CSS es un atributo que podemos agregar a los elementos HTML para los que queremos aplicar las mismas reglas de estilo, como los elementos del menú superior o los títulos de los widgets de la barra lateral. En otras palabras, podemos usar clases CSS para Agrupar o clasificar elementos HTML. que son similares de una manera u otra.
Las pseudo-clases son similares a ellas en el sentido de que también son Se utiliza para agregar reglas de estilo a los elementos que comparten la misma característica..
Pero mientras las clases genuinas son usuario definido y puede ser visto en el código fuente, por ejemplo los trabajo de clases regulares de CSS Es para clasificar o agrupar elementos. Los desarrolladores saben cómo agrupar sus elementos: pueden formar clases como "elementos de menú", "botones", "miniaturas", etc. para agrupar, y luego diseñar elementos similares. Estas clasificaciones se basan en las características de los elementos que son dado por los propios desarrolladores. Por ejemplo, si un desarrollador decide usar un Elementos HTML sin embargo tienen sus propias características comunes basado en su estado, posición, naturaleza e interacción con la página y el usuario. Estas son las características que tienen. no Típicamente marcado en el código HTML, pero nosotros podemos apuntarlos con pseudo-clases en CSS, por ejemplo: Estos son el tipo de características que generalmente son objeto de las pseudo clases. Para entender mejor la diferencia entre clases y pseudo-clases, asumamos que estamos usando la clase Podemos diseñar estos últimos elementos secundarios con el siguiente CSS: ¿Pero qué pasa cuando cambia el último elemento? Bueno, tendremos que mover el Esta molestia de Actualización de clases se puede dejar al agente de usuario, al menos para aquellas características que son comunes entre los elementos (y ser un último elemento es tan común como puede ser). Teniendo un predefinido Hay muchos tipos de pseudo-clases, todas ellas nos brindan formas de identificar elementos en función de sus características que de otra manera son inaccesibles o difíciles de acceder. Aquí hay una lista de pseudo clases estándar en MDN. Las pseudo-clases dinámicas se agregan y se eliminan de los elementos HTML dinamicamente, basado en el estado en el que hacen la transición en respuesta a las interacciones del usuario. Algunos de los ejemplos de pseudo-clases dinámicas son Las pseudo-clases basadas en el estado se agregan a los elementos cuando son en un estado estático particular. Algunos de sus ejemplos más conocidos son: La pseudo-clase basada en el estado más popular tiene que ser Las pseudo-clases estructurales clasifican elementos basados En su posición en la estructura del documento.. Sus ejemplos más comunes son: También hay pseudo-clases misceláneas que son difíciles de clasificar, tales como: Una de las cosas más difíciles de las pseudo-clases es probablemente entender la diferencia entre las Ambas son pseudo-clases estructurales, y marcan un elemento específico dentro de un elemento padre (Contenedor), pero de una manera diferente.. Asumir norte es 2, entonces Echemos un vistazo a un ejemplo.. Veamos cómo este estilo CSS corto del HTML en dos casos diferentes.. En el caso 1, el segundo elemento dentro de una Pero si el elemento padre hace tener un segundo párrafo, el En nuestro ejemplo, el Párrafo 1, Niño 1 Párrafo 2, Niño 3 En el segundo caso, movemos la lista desordenada al tercer lugar, y el segundo párrafo aparecerá antes. Esto significa que tanto el Párrafo 1, Niño 1 Párrafo 2, Niño 2 Si quieres leer más sobre las diferencias entre los Cuando hablamos de pseudo-clases, también es importante entender como difieren de los pseudo-elementos, para no mezclarlos. Pero mientras usamos pseudo-clases para seleccionar elementos HTML que existen en el árbol de documentos simplemente no marcados por separado, los pseudo-elementos nos permiten apuntar a elementos que normalmente no existen en el DOM, ya sea en absoluto (por ejemplo, También hay un diferencia en la sintaxis. Los pseudo-elementos son generalmente identificados con dos puntos dobles Esto puede llevar a un caso de confusión, como en CSS2, los pseudo-elementos fueron marcados con un solo punto y los navegadores siguen aceptando la sintaxis del colon para los pseudo-elementos.. También hay diferencias entre las pseudo-clases y los pseudo-elementos en La forma en que podemos orientarlos con CSS. Los pseudo-elementos solo pueden aparecer. después la secuencia de selectores, mientras que las pseudo-clases se pueden colocar en cualquier lugar de la secuencia del selector CSS. Por ejemplo, puede segmentar el último elemento de lista de un elemento de lista como O La primera secuencia del selector selecciona el último niño dentro del Intentemos hacer algo similar con pseudo-elementos.. El código CSS anterior es válido y aparecerá el texto "rojo". después la Este código, por otro lado, no funcionará, ya que nosotros no se puede cambiar la posición de un pseudo-elemento dentro de la secuencia selectora. Además, solo un pseudo-elemento puede aparecer junto a un selector, mientras que las pseudo-clases se pueden combinar entre sí Si la combinación tiene sentido. Por ejemplo, para apuntar a los primeros elementos secundarios que también son de solo lectura, podemos crear una combinación de las pseudo-clases Un código selector con una Es importante saber que estos son no Pseudo-clases de CSS que están siendo apuntados por jQuery. Se llaman extensiones jQuery selector.. Las extensiones del selector jQuery te permiten elementos HTML de destino con palabras clave más simples. La mayoría de ellos son combinaciones de múltiples selectores de CSS normales, que se representan con una sola palabra clave.Propósito de las pseudo-clases
.último Identificar los últimos elementos en diferentes contenedores padre..
li.last text-transform: mayúscula; option.last font-style: italic;
.último Clase del anterior último elemento al actual..:último niño pseudo-clase es muy útil por cierto. De esta manera, nosotros No es necesario indicar el último elemento. en el código HTML, pero todavía podemos aplicarles el estilo con el siguiente CSS: li: último hijo text-transform: mayúsculas; opción: último hijo font-style: italic;
Principales tipos de pseudo-clases
1. Pseudo-clases dinámicas
:flotar, :atención, :enlazar, y :visitó, todo lo cual se puede agregar a la etiqueta de anclaje. a: visitó color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Seudo-clases basadas en el estado
:comprobado que pueden aplicarse a casillas de verificación ():pantalla completa para apuntar a cualquier elemento que se muestra actualmente en modo de pantalla completa:discapacitado para elementos HTML que pueden estar en modo deshabilitado, como , , y . :comprobado, que marca si una casilla está marcada o no. .casilla de verificación: marcada + etiqueta font-style: italic; entrada: deshabilitado fondo-color: #EEEEEE;
3. Pseudo-clases estructurales
:primer hijo, :último niño, y : nth-child (n) - todo se puede usar para apuntar a un elemento secundario específico dentro de un contenedor en función de su posición, y :raíz que se dirige al elemento padre de más alto nivel en el DOM. 4. Pseudo-clases misceláneas
: no (x) que selecciona elementos que no coinciden con el selector x: lang (código de idioma) que selecciona elementos cuyo contenido está en un idioma específico: dir (direccionalidad) que selecciona elementos con contenido de una direccionalidad dada (de izquierda a derecha o de derecha a izquierda). p: lang (ko) color de fondo: # FFFF00; : raíz fondo-color: # FAEBD7;
nth-child vs nth of type Pseudo-clases
: nth-child y : nth-of-type pseudo-clases.: nth-of-child (n) apunta a un elemento que es el segundo hijo de su elemento padre, y : nth-of-type (n) objetivos el segundo entre los el mismo tipo de elemento (como párrafos) dentro de un elemento padre. / * un párrafo que también es el segundo elemento secundario dentro de su elemento primario * / p: nth-child (2) color: # 1E90FF; // lightblue / * el segundo párrafo dentro de un elemento padre * / p: nth-of-type (2) font-weight: bold;
Caso 1
nth-child (2) La regla no se aplicará a ella. Aunque es un segundo hijo, es no un párrafo. nth-of-type (2) La regla se aplicará, ya que esta regla solo busca la elementos, y no se preocupa por otros tipos de elementos (como listas desordenadas) dentro del elemento padre.nth-of-type (2) La regla dará estilo al segundo párrafo que es Niño 3..
Lista desordenada 1, niño 2
Caso 2
: nth-child (2) y el : nth-of-type (2) Las reglas se aplicarán, ya que el segundo párrafo es también el segundo hijo de su padre
Lista desordenada 1, niño 3
: nth-of-child y : nth-of-type pseudo-clases, CSS Tricks tiene una gran publicación en él. Si usa SASS, Family.scss puede ayudarlo a crear nth-childelementos de ified.Pseudo-clases vs pseudo-elementos
Pseudo-elementos, como ::antes de y ::después (ver este tutorial sobre cómo usarlos) también están añadido por los agentes de usuario, y Se pueden orientar y diseñar con CSS. así como las pseudo-clases. ::antes de y ::después) o solo como ciertas partes de elementos existentes (por ejemplo, ::primera letra o :: marcador de posición). ::, mientras que las pseudo-clases se identifican con un solo colon :.1. Su lugar en la secuencia del selector CSS
ul>: last-child.red color: # B0171F;
ul> .red: último hijo color: # B0171F;
.rojo) y el segundo selecciona al último hijo entre los elementos que poseen el .rojo clase dentro ul> .red :: after display: block; contenido: 'rojo'; color: # B0171F;
artículos con la clase .rojo. ul> :: after.red display: block; contenido: 'rojo'; color: # B0171F;
2. Número de apariciones en una secuencia de selección
:primer hijo y :solo lectura de la siguiente manera: : primer hijo: solo lectura color: #EEEEEE;
Extensiones de Selector jQuery
: la sintaxis no siempre constituye una pseudo-clase CSS adecuada. Si alguna vez ha usado jQuery, es posible que haya usado muchos de sus selectores con : sintaxis, por ejemplo $ (': casilla de verificación'), $ (': input') y $ (': seleccionado'). / * Cambiar la fuente de todos los elementos HTML relacionados con la entrada, como el botón, seleccionar e ingresar * / $ (": input") .css ("font-family", "courier new")
