Selectores CSS
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 |
| elemento | p | Selecciona todos los elementos <p> |
1 |
| elemento, elemento | div,p | Selecciona todos los elementos <div> y <p> |
1 |
| elemento elemento |
div p | Selecciona todos los elementos <p> dentro de los elementos <div> |
1 |
| elemento > elemento | div> p | Selecciona todos los <p> cuyo elemento padre es un <div> |
2 |
| elemento + elemento | div+p | Selecciona todos los <p> situados inmediatamente después de un <div> |
2 |
| elemento1 ~ elemento2 | p ~ ul | Selecciona cada <ul> precedido por un <p> |
3 |
| [attributo] | [target] | Selecciona todos los elementos con un atributo target. |
2 |
| [attributo = valor] |
[target=_blank] | Selecciona todos los elementos con un atributo target="_blank" |
2 |
| [attributo ~= contiene] | [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 |
| [attributo |= empieza] | [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 |
| [attributo ^= empieza] | a[src ^= "https"] | Selecciona todos los <a> con un atributo src que empieza con"https". |
3 |
| [attributo $= acaba] | a[src$=".pdf"] | Selecciona todos los <a>con un atributo src que acaba con ".pdf" |
3 |
| [attributo *= contiene] | a[src *= "css3"] | Selecciona todos los <a> con un atributo src que contiene "css3" |
3 |
| :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 |
| ::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 |
| :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 |
| :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 |
| :first-of-type | p:first-of-type | Selecciona todos los <p> que sean el primer <p> hijo de su padre. |
3 |
| :only-child | p:only-child | Selecciona todos los <p> que sean el único 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 |
| :last-child | p:last-child | Selecciona todos los <p> que sean el último 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 |
| :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 |
| :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. |
Pseudo-clases para UI ( interfaz de usuario )
Afecta a los elementos de interfaz de usuario, como por ejemplo los elementos de formulario.
| Selector | Ejemplo | Descripción |
|---|---|---|
| :focus | input:focus | Selecciona el elemento <input> enfocado. |
| :focus-within | form:focus-within | Selecciona un elemento, por ejemplo un formulario, que tiene un elemento hijo focusado.. |
| :enabled | input:enabled | Selecciona todos los elementos <input> que están habilitados ( permiten la escritura ). |
| :disabled | input:disabled | Selecciona todos los elementos <input> deshabilitados ( que no permiten la escritura ) |
| :checked | input:checked | Selecciona todos los elementos <input> ( botones de radio o casillas de verificación ) marcados ( checked ) |
| :indeterminate | input:indeterminate | Se refiere a las casillas de verificación o botones de radio que no están ni activadas ( checked ) ni desactivadas ( unchecked )¡OJO! En HTML no existe un atributo "indeterminate". Es posible hacer que una casilla de verificación sea indeterminate, solo a través de javascript: checkbox.indeterminate = true;
|
| :default | input:default ~ label{ border:1px solid red; } |
Se refiere a las casillas de verificación o botones de radio que están habilitados por defecto. ( No cambia al marcar otra casilla ). |
| :valid | input[required]:valid{ box-shadow: green; } |
Se refiere a los elementos de formulario que cumplen los requisitos necesarios. |
| :invalid | input[required]:invalid{ box-shadow: red; } |
Se refiere a los elementos de formulario que NO cumplen los requisitos necesarios. |
| :in-range | input:in-range | Selecciona los elementos cuyo valor esta dentro de los limites establecidos ( por los atributos min y max )<input type="number" min="1" max="10" value="5"> |
| :out-of-range | input:out-of-range | Selecciona los elementos cuyo valor esta fuera de los limites establecidos ( por los atributos min y max )<input type="number" min="1" max="10" value="15"> |
| :required | input:required | Selecciona los elementos de formulario obligatorios ( que tienen un atributo required ) |
| :optional | input:optional | Selecciona los elementos de formulario opcionales ( que no tienen un atributo required ) |
| :read-write | input:read-write | Selecciona los elementos de formulario que pueden ser editados por el usuario (elementos contenteditable = "true" o elementos input que no tienen un atributo readonly ). |
| :read-only | input:read-only | Selecciona los elementos de formulario que NO pueden ser editados por el usuario (elementos input que tienen un atributo readonly ). |