Los selectores de pseudo clases son selectores de CSS precedidos por dos puntos. Probablemente esté familiarizado con algunos de ellos. Como flotar:
a:hover {
/* Yep, hover is a pseudo class */
}Son inmensamente útiles en una variedad de situaciones. Algunos de ellos son CSS3, algunos CSS2… depende de cada uno en particular. Fuera de IE, tienen un excelente soporte para navegadores. En la tierra de IE, incluso IE8, el soporte es bastante estéril. Sin embargo, la vista previa de IE9 tiene soporte completo para ellos. Los relacionados con el enlace funcionan, pero no mucho más. Echemos un breve vistazo a cada uno de ellos. No se preocupe, no hay tantos.
Selectores de pseudoclase relacionados con el enlace
: link – Quizás el pseudo selector relacionado con enlaces que más confusión causa. No son todos <a> ¿Enlaces? Bueno, no si no tienen un atributo href. Esto selecciona solo aquellos que lo hacen, por lo tanto, es esencialmente lo mismo que un[href]. Este selector será mucho más útil si la vinculación de cualquier elemento se convierte en realidad.
:visited – Selecciona enlaces que ya han sido visitados por el navegador actual.
:hover – Cuando el cursor del mouse pasa sobre un enlace, ese enlace está en su estado de desplazamiento y esto lo seleccionará.
:active – Selecciona el enlace mientras se activa (se hace clic en él o se activa). Por ejemplo, para el estado “presionado” de un enlace con estilo de botón o para hacer que todos los enlaces se sientan más parecidos a un botón.
Existe una técnica divertida para recordar todos los selectores de pseudo clases de enlaces. Mira la primera letra de cada uno: LVHA… LOVmi HATE.
Selectores de pseudoclase relacionados con la entrada y el enlace
:focus – Definir estilos de desplazamiento para los enlaces es genial, pero no ayuda a aquellos que usaron la navegación por teclado para llegar al enlace. : focus seleccionará los enlaces que son el foco actual del teclado. Esto no se limita a los enlaces, sino que también se puede usar (y realmente debería usarse) en entradas y áreas de texto. Algunos le dirán que defina un estilo: focus para cualquier cosa que tenga un estilo: hover.
Formulario con una entrada de texto enfocada. El fondo amarillo es un estilo de enfoque.
:target – La pseudoclase de destino se usa junto con los ID y coincide cuando la etiqueta hash en la URL actual coincide con ese ID. Entonces, si está en la URL www.yoursite.com/#home, el selector #home: target coincidirá. Eso puede ser extremadamente poderoso. Por ejemplo, puede crear un área con pestañas donde las pestañas se vinculan a etiquetas hash y luego los paneles se “activan” haciendo coincidir: selectores de destino y (por ejemplo) usando el índice z para moverse a la parte superior.
:enabled – Selecciona las entradas que están en el estado predeterminado de habilitadas y listas para usarse.
:disabled – Selecciona entradas que tienen el atributo deshabilitado. Muchos navegadores harán que la entrada sea gris atenuada, puedes controlar eso con este selector.
Formulario utilizando el atributo: disabled.
:checked – Selecciona las casillas de verificación que están, espere, marcadas.
:indeterminate – Selecciona botones de opción que están en el estado purgatorio de ni elegidos ni no elegidos (como cuando una página se carga con opciones de botones de opción pero no se establece ningún valor predeterminado).
Conjunto de botones de radio en el purgatorio. O más exactamente, en su estado: indeterminado.
:required – Selecciona entradas con el required atributo.
:optional – Selecciona entradas que no tienen el required atributo.
:read-only / :read-write – Selecciona elementos basados en una combinación de readonly y disabled attriutes.
Selectores de pseudoclase basados en posición / número
:root – Selecciona el elemento que está en la raíz del documento. Casi con certeza seleccionará el <html> elemento, a menos que esté trabajando específicamente en algún entorno extraño que de alguna manera también permita CSS. Quizás XML.
:first-child – Selecciona el primer elemento dentro de un padre.
:last-child – Selecciona el último elemento dentro de un padre.
:nth-child() – Selecciona elementos basados en una simple expresión algebraica proporcionada (por ejemplo, “2n” o “4n-1”). Tiene la capacidad de hacer cosas como seleccionar elementos pares / impares, “cada tercio”, “los primeros cinco” y cosas así. Cubierto con más detalle aquí con una herramienta de prueba.
:nth-of-type() – Funciona como: nth-child, pero se usa en lugares donde los elementos del mismo nivel son de diferentes tipos. Como si dentro de un div tuvieras varios párrafos y varias imágenes. Querías seleccionar todas las imágenes impares. : nth-child no trabajará allí, usarías div img:nth-of-type(odd). Particularmente útil cuando se trabaja con listas de definiciones y su alternancia <dt> y <dd> elementos.
:first-of-type – Selecciona el primer elemento de este tipo dentro de cualquier padre. Entonces, si tiene dos divs, cada uno tiene un párrafo, una imagen, un párrafo, una imagen. Entonces div img: first-of-type seleccionaría la primera imagen dentro del primer div y la primera imagen dentro del segundo div.
:last-of-type – Igual que arriba, solo seleccionaría la última imagen dentro del primer div y la última imagen dentro del segundo div.
:nth-last-of-type() – Funciona como: nth-of-type, pero cuenta desde abajo en lugar de arriba.
:nth-last-child() – Funciona como: nth-child, pero cuenta desde abajo en lugar de arriba.
:only-of-type – Selecciona solo si el elemento es el único de su tipo dentro del padre actual.
Selectores de pseudoclase basados en posición / número
Selectores de pseudo clases relacionales
:not() – Elimina elementos de un conjunto emparejado existente que coinciden con el selector dentro del parámetro de: not (). Entonces, por ejemplo, todos los div excepto aquellos con una clase de “música” = div: no (.music). La especificación dice que: no los selectores no se pueden anidar, pero se pueden encadenar. Algunos navegadores (Firefox) también admiten selectores separados por comas como parámetro de selector, aunque encadenarlos sería una apuesta mucho más segura. También es útil junto con selectores de atributos, por ejemplo, input: not ([disabled]).
:empty – Selecciona elementos que no contienen texto ni elementos secundarios. Me gusta: <p></p>
Selectores / elementos de pseudoclase relacionados con el texto
::first-letter – Selecciona la primera letra del texto en el elemento. Uso típico: tapas abatibles.
::first-line – Selecciona la primera línea de texto del elemento. Uso típico: establecer la primera oración en versalitas como un punto de atracción / introducción tipográfico.
:lang – Este pseudo selector está en la especificación CSS3 pero solo implementado en IE 8+. Coincidirá con cualquier elemento que tenga o sea descendiente de un elemento con un atributo lang coincidente. Por ejemplo, :lang(fr) coincidirá con cualquier párrafo, incluso sin un atributo lang, si el cuerpo principal tenía lang="fr" como atributo.
Nota rápida
Puede encadenar pseudo selectores del mismo modo que puede encadenar selectores de clase e ID. Esto es particularmente útil aquí mientras miramos :first-letter y :first-line. Probablemente no quieras tapar todos los párrafos de la página, sino solo el primero, así que, p:first-child:first-letter { }
Dropcap usando: primera letra, que agranda el tamaño de la fuente y flota hacia la izquierda.
Seudo “elementos” relacionados con el contenido
::before – Es capaz de agregar contenido antes de un determinado elemento. Por ejemplo, agregar una cita de apertura antes de una cita en bloque o quizás una imagen anterior para diferenciar un párrafo en particular.
::after – Es capaz de agregar contenido después de un determinado elemento. Por ejemplo, una cita de cierre de una cita en bloque. También se usa comúnmente para clearfix, donde se agrega un espacio vacío después del elemento que borra el flotante sin necesidad de marcado HTML adicional.
Pseudoelementos frente a pseudo selectores
Estos se denominan apropiadamente pseudo “elementos” (no selectores) porque no seleccionan ningún elemento “real” que exista en la página. Esto se aplica a estos dos, así como a las secciones anteriores. :first-letter y :first-line. ¿Tener sentido? Como la primera letra que ::first-letter selects no es un elemento en sí mismo, es solo una parte de un elemento existente, por lo tanto, un pseudo elemento.
| Estilo de selector | Nombre | Lo hace | Especificidad |
|---|---|---|---|
| :: | seudo elemento | selecciona algunos reales contenido | 0 0 0 1 |
| : | seudo selector | selecciona elementos en ciertas condiciones | 0 0 1 0 |
Calificación de etiqueta
Estos selectores se pueden calificar como etiqueta, lo que significa que solo se aplicarán si el elemento (etiqueta) y el selector coinciden. Por ejemplo:
p:first-child {
color: red;
}Eso solo coincidirá si el primer hijo de otro elemento es un <p>. Si no es así, no coincidirá.
Obsoleto
: contiene () – Hasta donde yo sé, esto se ha ido. La especificación actual de CSS3 lo ha eliminado. No conozco la historia, avíseme si la conoce. De un vistazo, parece ridículamente útil (puede seleccionar objetos en función del contenido textual que contienen). Puede deberse a problemas o que el contenido de los selectores no sea deseable. Mi preferencia sería que se seleccione por elementos en lugar de texto, como p:contains(img), pero, por desgracia, no tuve tanta suerte.
::selección – Permite el cambio de estilo del texto seleccionado. Se redactó para el nivel 3 de selectores de CSS, pero se eliminó antes de que alcanzara el estado de Recomendación. A pesar de esto, está implementado en algunos navegadores, que probablemente retendrán soporte experimental para él. Para Firefox, puede usar :: – moz-selection. Más información aquí.
Uso de jQuery
jQuery puede usar todos estos en sus selectores, lo cual es increíble. Aún más asombroso, jQuery tiene selectores de pseudoclase adicionales disponibles.
:first – Coincide con la primera instancia del conjunto ya emparejado. Esto es diferente a: nth-child (1) que solo seleccionará si el selector coincide y es el primer hijo. Con: primero, el selector coincide, luego toma el primero que encuentra independientemente de la posición secundaria.
:eq() – jQuery no es compatible :nth-of-type como parte de su motor selector, pero esto es muy similar. Lo hace ahora. Esto selecciona el elemento X del conjunto ya emparejado. También tiene un índice cero (0 es el primer elemento) a diferencia de :nth-child en el que el primer elemento es 1.
:contains('text') – Esto se elimina de CSS, pero funciona en jQuery.
:lt() – Lo mismo que: nth-child (-n + X), ya que selecciona los “primeros X elementos”
:gt() – Lo mismo que: nth-child (n + X), ya que selecciona todo excepto los “primeros elementos (X-1)”
:even – Lo mismo que :nth-child(even) o :nth-child(2n)
:odd – Lo mismo que :nth-child(odd) o :nth-child(2n+1)
:has() – Prueba si el elemento tiene un descendiente de cierto selector antes de hacer coincidir, como :has("div.intro").
En realidad, hay muchos más, y todos son inteligentes y útiles (o al menos una mejora en la legibilidad). Consulte la documentación del selector para obtener más información.
NOTA: jQuery realmente no puede ayudarlo con pseudo elementos como ::before y ::after, pero puede acceder a sus valores en algunos navegadores. Por ejemplo, si un div tuviera algo ::before contenido generado, podría obtener el valor como:
var div = document.querySelector("div");
var content = window
.getComputedStyle(div, '::before')
.getPropertyValue('content');Especificidad
Los selectores de clase y los selectores de pseudoclase tienen el mismo peso de especificidad. Los pseudo elementos tienen la especificidad de un selector de elementos.
li {} /* specificity = 0,0,0,1 */
li:first-child {} /* specificity = 0,0,1,1 */
li:first-line {} /* specificity = 0,0,0,2 */
li.red {} /* specificity = 0,0,1,1 */Por lo general, se usan en conjunto o se enumeran posteriormente en CSS de todos modos, por lo que es de esperar que no cause demasiados problemas …
ul li.friend { margin: 0 0 5px 0; }
ul li:last-child { margin: 0; }En ese caso, la reducción a cero del margen funcionaría (suponiendo que coincidiera con el mismo elemento), pero solo porque la reducción a cero aparece en segundo lugar (tienen la misma especificidad). Así que … esté atento a eso.