Errores PHP
X
Usuario
Password
0 FPS

Referéncia CSS : Selectores

17 de Octubre del 2012 por Josep Antoni Bover, 4169 visitas, 1 comentario, 4 votos con una media de 4.25 sobre 5.
Categorías : CSS, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Referéncia CSS : Selectores

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

PropiedadDescripciónNavegadoresCSS
:activeSelecciona el enlace que se está presionando con el mouse.1
:checkedSelecciona las etiquetas input marcadas.3
:defaultSelecciona las etiquetas que sean el control por defecto de su grupo.
3
:dir
3
:disabledSelecciona las etiquetas desactivadas.3
:emptySelecciona los elementos especificados que están vacios.2
:enabledSelecciona las etiquetas activadas.3
:first-childSelecciona el primer elemento especificado dentro de su jerarquía.3
:first-of-typeSelecciona todos los elementos especificados que son el primer hijo (del mismo tipo) de otro elemento.3
:focusSelecciona elemento que tiene el foco del teclado.2
:fullscreen
3
:hoverSelecciona elemento situado debajo del mouse.2
:indeterminate3
:invalid3
:langSelecciona el elemento con el atributo language que empiece por el idioma especificado.2
:last-childSelecciona el último elemento especificado dentro de su jerarquía.2
:last-of-typeSelecciona todos los elementos especificados que son el último hijo (del mismo tipo) de otro elemento.2
:left
2
:linkSelecciona los enlaces.1
:notSelecciona las etiquetas que no sean la especificada.3
:nth-childSelecciona el elemento especificado partiendo de la posición del hijo.3
:nth-last-childSelecciona el elemento especificado partiendo de la posición del hijo, contando por detrás.3
:nth-last-of-typeSelecciona el elemento especificado (del mismo tipo) partiendo de la posición del hijo, contando por detrás.3
:nth-of-typeSelecciona el elemento especificado (del mismo tipo) partiendo de la posición del hijo.3
:only-childSelecciona todos los elementos especificados que son el único hijo de otro elemento.3
:only-of-typeSelecciona todos los elementos especificados que son el único hijo (del mismo tipo) de otro elemento.3
:optional3
:read-write
3
:right
3
:rootSelecciona la raíz del documento.3
:targetSelecciona el último anclaje en el que se ha hecho click.3
:valid3
:visitedSelecciona los enlaces visitados.3

Pseudo elemento

PropiedadDescripciónNavegadoresCSS
::afterInserta un texto después del elemento especificado.2
::beforeInserta un texto antes del elemento especificado.2
::first-letterSelecciona la primera letra del elemento especificado.1
::first-lineSelecciona la primera línea del elemento especificado.1
::selectionSelecciona la porción del elemento que ha sido seleccionado por el usuario.3

Selectores por atributo

PropiedadDescripciónNavegadoresCSS
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

PropiedadDescripciónNavegadoresCSS
Selector de etiquetaSelecciona todas las etiquetas del tipo especificado.1
Selector de claseSelecciona todas las etiquetas que tengan la clase MiClase.1
Selector de IDSelecciona la etiqueta que tenga la ID MiID.1

Selectores combinados

PropiedadDescripciónNavegadoresCSS
Selector múltipleSelecciona multiples elementos para aplicar el mismo estilo.1
Selector descendenciaSelecciona los elementos #MiID dentro de los elementos div.1
Selector hijosSelecciona los elementos span que tengan cómo padre un elemento p.3
Selector adyacenteSelecciona los elementos p que se encuentren justo despues de un elemento div.3
Selector precendenciaSelecciona los elementos span que esten precedidos por un elemento p.3
Selector universalSelecciona 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.


Propiedades documentadas : 44/54
Modificado por última vez : 03/06/2016.


[#1] Iván 03 Noviembre del 2012 a las 13:53, votos 2 de 2.
Un excelente aporte que tiene más valor todavía. Existe un script que hace compatibles las versiones antiguas de Explorer con CSS3, con lo que todas las funciones y propiedades que comentas sí que las podríamos usar en Explorer. Se llama Selectivzr y necesita de alguno de los frameworks más populares para funcionar, jQuery, Motools, etc... Hoy en día casi todos lo usamos así que tampoco creo que suponga demasiado problema. Gran post.