Tipos de selectores en CSS1, CSS2 y CSS3
12 de febrero 2013
Los selectores de CSS son identificadores para poder aplicar estilos a los elementos deseados. Hasta aquí, se supone que después de tanto tiempo trabajando con estilos, aclarar lo que es un selector es algo que sobra. Sin embargo, lo que no es habitual es saber los tipos de selectores que hay, sus funciones, cómo se pueden anidar y sobre todo, con la llegada de CSS3, cuáles son los nuevos.
Para ver todo ello nada mejor que irnos al grano y ver todos los selectores que existen, su sintaxis y funciones. La siguiente tabla la he extraído y traducido al castellano de la guía de referencia CSS del portal w3schools, ya que es muy completa. Algunos de ellos ya los vimos al hablar de las pseudoclases.
| Selector | Ejemplo | Descripción del ejemplo | CSS |
|---|---|---|---|
| .clase | .titular | Selecciona todos los elementos con class=»titular» | 1 |
| #id | #menu | Selecciona el elemento con id=»menu» | 1 |
| * | * | Selecciona todos los elementos | 2 |
| elemento | p | Selecciona todos los elementos <p> | 1 |
| elemento,elemento | div,p | Selecciona todos los <div> y todos los <p> | 1 |
| elemento elemento | div p | Selecciona todos los <p> dentro de los <div> | 1 |
| elemento>elemento | div>p | Selecciona todos los <p> donde el padre sea un <div> | 2 |
| elemento+elemento | div+p | Selecciona todos los <p> que estén inmediatamente después de un <div> | 2 |
| [attributo] | [target] | Selecciona todos los elementos con el atributo target | 2 |
| [attributo=valor] | [target=_blank] | Selecciona todos los elementos con target=»_blank» | 2 |
| [attributo~=valor] | [title~=coche] | Selecciona todos los elementos que contengan «coche» en el atributo title | 2 |
| [attributo|=valor] | [lang|=en] | Selecciona todos los elementos cuyo atributo lang comience por «en» | 2 |
| :link | a:link | Selecciona todos los enlaces no visitados | 1 |
| :visited | a:visited | Selecciona todos los enlaces visitados | 1 |
| :active | a:active | Selecciona los enlaces activos | 1 |
| :hover | a:hover | Selecciona los enlaces en estado rollover | 1 |
| :focus | input:focus | Seleccionan los input que tengan el focus | 2 |
| :first-letter | p:first-letter | Selecciona la primera letra de cada <p> | 1 |
| :first-line | p:first-line | Selecciona la primera línea de cada <p> | 1 |
| :first-child | p:first-child | Selecciona cada <p> que sea el primer hijo de otro elemento padre | 2 |
| :before | p:before | Inserta contenido antes de cada <p> | 2 |
| :after | p:after | Inserta contenido después de cada <p> | 2 |
| :lang(idioma) | p:lang(es) | Selecciona cada <p> cuyo valor del atributo lang sea «es» | 2 |
| elemento1~elemento2 | p~ul | Selecciona cada <ul> que sea precedido por un <p> | 3 |
| [attributo^=valor] | a[src^=»https»] | Selecciona cada <a> cuyo valor del atributo src comience con «https» | 3 |
| [attributo$=valor] | a[src$=».pdf»] | Selecciona cada <a> cuyo valor del atributo src termine con «.pdf» | 3 |
| [attributo*=valor] | a[src*=»veteasabertu»] | Selecciona cada <a> cuyo valor del atributo src contenga la subcadena «veteasabertu» | 3 |
| :first-of-type | p:first-of-type | Selecciona cada <p> que sea el primer <p> de un elemento padre | 3 |
| :last-of-type | p:last-of-type | Selecciona cada <p> que sea el último <p> de un elemento padre | 3 |
| :only-of-type | p:only-of-type | Selecciona cada <p> que sea el único <p> de su padre | 3 |
| :only-child | p:only-child | Selecciona cada <p> que sea el único elemento 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 cada <p> que sea el segundo hijo de su padre, contando desde el último hijo | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Selecciona cada <p> que sea el segundo <p> de su padre | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona cada <p> que sea el segundo <p> de su padre, contando desde el último hijo | 3 |
| :last-child | p:last-child | Selecciona cada <p> que sea el último hijo de su padre | 3 |
| :root | :root | Selecciona el elemento raíz del documento | 3 |
| :empty | p:empty | Selecciona cada <p> que no tenga hijos (incluyendo cadenas de texto) | 3 |
| :target | #news:target | Selecciona el actual estilo #noticia activo (al hacer click en una URL que contenga ese nombre de anchor) | 3 |
| :enabled | input:enabled | Selecciona cada <input> disponible | 3 |
| :disabled | input:disabled | Selecciona cada <input> no disponible | 3 |
| :checked | input:checked | Selecciona cada <input> marcado | 3 |
| :not(selector) | :not(p) | Selecciona todos los elementos que no sean <p> | 3 |
| ::selection | ::selection | Selecciona la parte del texto que haya seleccionado el usuario (con el ratón por ejemplo) | 3 |
Buen aporte, gracias!
Me alegra que te haya servido 😉 ¡Un abrazo!