Referéncia CSS : Selectores
Categorías : CSS, HTML, Programación.

Los selectores CSS son una parte fundamental que todo el que se aventure a crear una hoja de estilos CSS debería conocer mínimamente. En esencia estos selectores nos permiten referirnos a una parte en concreto de la página web para poder estilizarla a nuestra conveniencia.
Dentro de un documento HTML podemos identificar cada etiqueta de una forma básica por el nombre de la etiqueta, por una clase, o por una ID. Pero además también podemos crear selectores para una gran variedad de situaciones, por ejemplo podemos crear un selector que se refiera a cuando el mouse está encima de una etiqueta, un selector que busque una etiqueta dentro de una etiqueta, un selector que busque una etiqueta antes o después de una determinada etiqueta, etc..
En este artículo voy a enumerar todos los selectores CSS disponibles hasta la fecha de hoy, además incluiré ejemplos para cada uno de ellos.
Pseudo clase
Propiedad | Descripción | Navegadores | CSS |
---|---|---|---|
:active | Selecciona el enlace que se está presionando con el mouse. | ![]() ![]() ![]() ![]() ![]() | 1 |
:checked | Selecciona las etiquetas input marcadas. | ![]() ![]() ![]() ![]() ![]() | 3 |
:default | Selecciona las etiquetas que sean el control por defecto de su grupo. | ![]() ![]() ![]() ![]() | 3 |
:dir | ![]() | 3 | |
:disabled | Selecciona las etiquetas desactivadas. | ![]() ![]() ![]() ![]() ![]() | 3 |
:empty | Selecciona los elementos especificados que están vacios. | ![]() ![]() ![]() ![]() ![]() | 2 |
:enabled | Selecciona las etiquetas activadas. | ![]() ![]() ![]() ![]() ![]() | 3 |
:first-child | Selecciona el primer elemento especificado dentro de su jerarquía. | ![]() ![]() ![]() ![]() ![]() | 3 |
:first-of-type | Selecciona todos los elementos especificados que son el primer hijo (del mismo tipo) de otro elemento. | ![]() ![]() ![]() ![]() ![]() | 3 |
:focus | Selecciona elemento que tiene el foco del teclado. | ![]() ![]() ![]() ![]() ![]() | 2 |
:fullscreen | ![]() ![]() ![]() ![]() | 3 | |
:hover | Selecciona elemento situado debajo del mouse. | ![]() ![]() ![]() ![]() ![]() | 2 |
:indeterminate | ![]() ![]() ![]() ![]() ![]() | 3 | |
:invalid | ![]() ![]() ![]() ![]() ![]() | 3 | |
:lang | Selecciona el elemento con el atributo language que empiece por el idioma especificado. | ![]() ![]() ![]() ![]() ![]() | 2 |
:last-child | Selecciona el último elemento especificado dentro de su jerarquía. | ![]() ![]() ![]() ![]() ![]() | 2 |
:last-of-type | Selecciona todos los elementos especificados que son el último hijo (del mismo tipo) de otro elemento. | ![]() ![]() ![]() ![]() ![]() | 2 |
:left | ![]() ![]() | 2 | |
:link | Selecciona los enlaces. | ![]() ![]() ![]() ![]() ![]() | 1 |
:not | Selecciona las etiquetas que no sean la especificada. | ![]() ![]() ![]() ![]() ![]() | 3 |
:nth-child | Selecciona el elemento especificado partiendo de la posición del hijo. | ![]() ![]() ![]() ![]() ![]() | 3 |
:nth-last-child | Selecciona el elemento especificado partiendo de la posición del hijo, contando por detrás. | ![]() ![]() ![]() ![]() ![]() | 3 |
:nth-last-of-type | Selecciona el elemento especificado (del mismo tipo) partiendo de la posición del hijo, contando por detrás. | ![]() ![]() ![]() ![]() ![]() | 3 |
:nth-of-type | Selecciona el elemento especificado (del mismo tipo) partiendo de la posición del hijo. | ![]() ![]() ![]() ![]() ![]() | 3 |
:only-child | Selecciona todos los elementos especificados que son el único hijo de otro elemento. | ![]() ![]() ![]() ![]() ![]() | 3 |
:only-of-type | Selecciona todos los elementos especificados que son el único hijo (del mismo tipo) de otro elemento. | ![]() ![]() ![]() ![]() ![]() | 3 |
:optional | ![]() ![]() ![]() ![]() ![]() | 3 | |
:read-write | ![]() ![]() ![]() | 3 | |
:right | ![]() ![]() | 3 | |
:root | Selecciona la raíz del documento. | ![]() ![]() ![]() ![]() ![]() | 3 |
:target | Selecciona el último anclaje en el que se ha hecho click. | ![]() ![]() ![]() ![]() ![]() | 3 |
:valid | ![]() ![]() ![]() ![]() ![]() | 3 | |
:visited | Selecciona los enlaces visitados. | ![]() ![]() ![]() ![]() ![]() | 3 |
Pseudo elemento
Propiedad | Descripción | Navegadores | CSS |
---|---|---|---|
::after | Inserta un texto después del elemento especificado. | ![]() ![]() ![]() ![]() ![]() | 2 |
::before | Inserta un texto antes del elemento especificado. | ![]() ![]() ![]() ![]() ![]() | 2 |
::first-letter | Selecciona la primera letra del elemento especificado. | ![]() ![]() ![]() ![]() ![]() | 1 |
::first-line | Selecciona la primera línea del elemento especificado. | ![]() ![]() ![]() ![]() ![]() | 1 |
::selection | Selecciona la porción del elemento que ha sido seleccionado por el usuario. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selectores por atributo
Propiedad | Descripción | Navegadores | CSS |
---|---|---|---|
Selector [atributo] | Selecciona los elementos que tienen definido el atributo especificado. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector [atributo=valor] | Selecciona los elementos que tienen el atributo con el valor especificado. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector [atributo~=valor] | Selecciona los elementos que el valor del atributo contenga la palabra especificada. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector [atributo*=valor] | Selecciona los elementos que el valor del atributo contenga el string especificado. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector [atributo|=valor] | Selecciona los elementos que el valor del atributo sea el valor especificado. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector [atributo^=valor] | Selecciona los elementos que el valor del atributo empiece con el valor especificado (string). | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector [atributo$=valor] | Selecciona los elementos que el valor del atributo termine con el valor especificado. | ![]() ![]() ![]() ![]() ![]() | 3 |
Selectores básicos
Propiedad | Descripción | Navegadores | CSS |
---|---|---|---|
Selector de etiqueta | Selecciona todas las etiquetas del tipo especificado. | ![]() ![]() ![]() ![]() ![]() | 1 |
Selector de clase | Selecciona todas las etiquetas que tengan la clase MiClase . | ![]() ![]() ![]() ![]() ![]() | 1 |
Selector de ID | Selecciona la etiqueta que tenga la ID MiID . | ![]() ![]() ![]() ![]() ![]() | 1 |
Selectores combinados
Propiedad | Descripción | Navegadores | CSS |
---|---|---|---|
Selector múltiple | Selecciona multiples elementos para aplicar el mismo estilo. | ![]() ![]() ![]() ![]() ![]() | 1 |
Selector descendencia | Selecciona los elementos #MiID dentro de los elementos div . | ![]() ![]() ![]() ![]() ![]() | 1 |
Selector hijos | Selecciona los elementos span que tengan cómo padre un elemento p . | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector adyacente | Selecciona los elementos p que se encuentren justo despues de un elemento div . | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector precendencia | Selecciona los elementos span que esten precedidos por un elemento p . | ![]() ![]() ![]() ![]() ![]() | 3 |
Selector universal | Selecciona TODAS las etiquetas. | ![]() ![]() ![]() ![]() ![]() | 1 |
Para la mayoría de los selectores de CSS2 hay que declarar "<!DOCTYPE>" si queremos que Internet Explorer 8 e inferiores funcionen con ellos, los selectores CSS3 directamente no funcionan en Internet Explorer 8 e inferiores.
Este documento se ha creado partiendo cómo base de la referencia de w3schools CSS Selector Reference, mi intención principal al crear este documento es la de probar todos los selectores que existen hasta la fecha, y crear mis propios ejemplos con ellos.
También debo decir que he descubierto mas de un selector interesante que hasta la fecha desconocía, así que por lo menos la experiencia me ha resultado útil. Personalmente os recomiendo echar un vistazo al selector ":active" el cual por su nombre no da mucho a entender su función (viene a ser cómo un OnClick), y al selector ":first-letter" del cual me ha parecido una buena idea ya que simplifica bastante el modificar el primer carácter de un párrafo.
Modificado por última vez : 30/12/2020.