Selectores CSS

facebook-svg gplus-svg twitter-svg

En el CSS hay dos tipos de "pseudo-cosas": pseudo-clases y pseudo-elementos.

Las pseudo-clases (:link, :visited, :active, :hover, :focus, :first-child, :lang... ) actúan como si añadieran una clase al elemento.
Los pseudo-elementos (::first-letter, ::first-line, ::before, ::after) actúan como si nuevos elementos fueran insertados en el documento.

Los dos puntos dobles ( :: ) fueron introducidos en el CSS3 como un intento de hacer una distinción entre las :pseudo-clases y los ::pseudo-elementos. Por suerte no pasa nada si no ponemos los dos puntos dobles delante de los pseudo-elementos ( ::before ), ya que la mayoría de los navegadores entienden el formato antiguo introducido en el CSS2 ( :before ). Es más: IE8 parece no entender los dos puntos dobles ( ::before ), pero sí entiende los dos puntos ( :before ).

Una tabla inspirada por w3schools - CSS Selector Reference

Selector Ejemplo Descripción CSS
.class .laClase Selecciona todos los elementos con class="laClase" 1
#id #elId Selecciona todos los elementos con id="elId" 1
* * Selector comodin. Selecciona todos los elementos. 2
element p Selecciona todos los elementos <p> 1
element,element div,p Selecciona todos los elementos <div> y <p> 1
element element div p Selecciona todos los elementos <p> dentro de los elementos <div> 1
element> element div> p Selecciona todos los <p> cuyo padre es un <div> 2
element+element div+p Selecciona todos los <p> situados inmediatamente después de un <div> 2
[attribute] [target] Selecciona todos los elementos con un atributo target. 2
[attribute=value] [target=_blank] Selecciona todos los elementos con un atributo target="_blank" 2
[attribute~=value] [title~=primero] Selecciona todos los elementos con un atributo title que contiene "primero" de una lista de palabras separadas por espacios:
( selecciona: title = "primero parafo", title = "primero titulo", etc... )
2
[attribute|=value] [lang|=en] Selecciona todos los elementos con un atributo lang que empieza con "en" de una lista de elementos separados por guiones:
( selecciona: lang = "en", lang = "en-US" y lang = "en-cockney" )
2
:link a:link Selecciona todos los enlaces no visitados 1
:visited a:visited Selecciona todos los enlaces visitados 1
:active a:active Selecciona todos los enlaces activos 1
:hover a:hover Selecciona todos los enlaces al pasar por encima. 1
:focus input:focus Selecciona el elemento <input> enfocado. 2
:first-letter p:first-letter Selecciona la primera letra de cada <p>. 1
:first-line p:first-line Selecciona la primera lí de cada <p>. 1
:first-child p:first-child Selecciona cada <p> que sea el primer hijo de su padre. 2
:before p:before Inserta contenido delante de cada elemento<p> 2
:after p:after Inserta contenido después de cada elemento<p> 2
:lang(language) p:lang(es) Selecciona cada <p> con un atributo lang="es" ( español ) 2
element1~element2 p~ul Selecciona cada <ul> precedido por un <p> 3
[attribute^=value] a[src^="https"] Selecciona todos los <a> con un atributo src que empieza con"https". 3
[attribute$=value] a[src$=".pdf"] Selecciona todos los <a>con un atributo src que acaba con ".pdf" 3
[attribute*=value] a[src*="css3"] Selecciona todos los <a> con un atributo src que contiene "css3" 3
:first-of-type p:first-of-type Selecciona todos los <p> que sean el primer <p> hijo de su padre. 3
:last-of-type p:last-of-type Selecciona todos los <p> que sean el último <p> hijo de su padre. 3
:only-of-type p:only-of-type Selecciona todos los <p> que sean el único <p> hijo de su padre. 3
:only-child p:only-child Selecciona todos los <p> que sean el único hijo de su padre. 3
:nth-child(n) p:nth-child(2) Selecciona cada <p> que sea el segundo hijo de su padre. 3
:nth-last-child(n) p:nth-last-child(2) Selecciona todos los <p> que sean el penúltimo hijo de su padre. ( El segundo a partir del último ) 3
:nth-of-type(n) p:nth-of-type(2) Selecciona cada <p> que sea el segundo <p> hijo de su padre. 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selecciona todos los <p> que sean el penúltimo <p> hijo de su padre. ( El segundo a partir del último ) 3
:last-child p:last-child Selecciona todos los <p> que sean el último hijo de su padre. 3
:root :root Selecciona el elemento raíz de los documentos.
En HTML el elemento raíz es siempre el <html.>
3
:empty p:empty Selecciona cada <p> qu NO tenga elementos hijos ( Esto implica que tampoco puede tener texto. ) 3
:target #news:target El selector de destino :target se puede usar para aplicar estilos al elemento de destino activo. 3
:enabled input:enabled Selecciona todos los elementos <input> que permiten la escritura. 3
:disabled input:disabled Selecciona todos los elementos <input> deshabilitados ( que no permiten la escritura ) 3
:checked input:checked Selecciona todos los elementos <input> marcados ( checked ) 3
:not(selector) :not(p) Selecciona todos los elementos que NO sean un párafo ( <p> ). 3
::selection ::selection

Selecciona la parte de un elemento seleccionada por el usuario.