Selectores CSS3

Selectores CSS3

Los selectores son filtros que podemos aplicar dentro de nuestra hoja de estilos para poder marcar contenido especial en los elementos de nuestras paginas web estos selectores comunmente toman de apoyo el nombre de las etiquetas html(</>), los indentificadores que ponemos a algunas de las etiquetas (#), y tambien los selectores se pueden aplicar mediante el apoyo de las clases (.) que pueden compartir varios elementos en las paginas web.

A continuación te presento algunos de los selectores que se encuentran disponibles dentro de la revisión mas actual de CSS3.

Tabla de Selectores

Selector	Descripción
* (asterisco)	Selecciona todos los elementos que se encuentren dentro de la página. Ej. *{...}
</> (cualquier etiqueta)	Selecciona todos los elementos que sean del tipo de etiqueta indicada. Ej. p{...}
</>,</>	Permite seleccionar todos los elementos que las etiquetas indicadas. Ej. p,span,blockquote{...}
# (identificador)	Permite seleccionar el elemento que cuente con el nombre del identificador. Ej. #menu{...}
.clase	Permite seleccionar todos los elementos que pertenezcan a la clase indicada. Ej. .submenu{...}
</>|#|. > </>|.	Selecciona todas las etiquetas o elementos de clase que como padre tengan a la etiqueta, identificador o clase indicada. Ej. div>section{...}
</> + </>	Selecciona todos lo objetos de la etiqueta indicada (2a) que se encuentra inmediatamente después y en el mismo nivel que la otra etiqueta(1a). Ej. section + p{...}
</> ~ </>	Selecciona cada elemento de la 2a etiqueta que se encuentre precedido por un elemento de la 1a etiqueta. Ej. nav ~ ul {...}
[atributo]	Permite seleccionar todos los elementos que contengan dicho atributo dentro de su etiqueta. Ej. [background]{...}
[atributo|=token]	Permite seleccionar todos los elementos que contengan el atributo y que su valor inicie con el token. Ej. [lang|=es]{...}
</>[atributo^="subcadena"]	Permite seleccionar los elementos que en el valor del atributo especificado inicien con la subcadena marcada. Ej. a[href^="http://"]
</>[atributo$="subcadena"]	Permite seleccionar los elementos que en el valor del atributo especificado terminen con la subcadena marcada. Ej. a[href$=".com.mx"]
</>[atributo*="subcadena"]	Permite seleccionar los elementos que en el valor del atributo especificado contengan con la subcadena marcada. Ej. a[href$="jwebmx"]
</>:first-of-type	Permite seleccionar cada elemento de la etiqueta indicada siempre y cuando sea el primer nodo de su padre y del tipo de la etiqueta indicada. Ej. li:first-of-type{...}
</>:last-of-type	Permite seleccionar cada elemento de la etiqueta indicada siempre y cuando sea el último nodo de su padre y del tipo de la etiqueta indicada. Ej. li:last-of-type{...}
</>:nth-child(#)	Selecciona cada elemento de la etiqueta indicada que ocupe la posición solicitada dentro de su padre. Ej. li:nth-child(3){...}
</>:nth-child(2n)	Permite seleccionar todos los hijos pares de un padre. Ej. td:nth-child(2n){...}
</>:nth-child(2n+1)	Permite seleccionar todos los hijos impares de un padre.
:not(</>|#|.)	Selecciona los elementos que no sean de la etiqueta, identificador o clase indicada.
input:checked	Selecciona todas las etiquetas input que se encuentren marcadas.
input:disabled	Selecciona todas las etiquetas input que se encuentren deshabilitados.
input:enabled	Selecciona todas las etiquetas input que  se encuentran habilitadas.
input:in-range	Selecciona todas las etiquetas input las cuales su valor se encuentren dentro del rango especificado.
input:invalid	Selecciona todas las etiquetas input que su valor sea el incorrecto.
input:valid	Selecciona todos lo elementos input que tengas un valor valido.
input:required	Selecciona todos los elementos input que tengas el atributo required indicado
</>::first-line	Permite seleccionar la primera linea de texto del elemento indicado.
</>::selection	Permite seleccionar el texto que el usuario ha seleccionado mediante el mouse o teclado.
</>:empty	Permite seleccionar el objeto que se encuentra totalmente vacío, esto incluye que tampoco tengo texto contenido dentro de sí.
|#|.:hover	Detecta si el usuario pasa por encima con el mouse por el objeto indicado.
a:link	Detecta sí un enlace no ha sido visitado.
a:visited	Detecta sí un enlace ya fue visitado.
a:active	Detecta sí un enlace está siendo seleccionado.

Algunos de estos selectores te muestro como aplicarlos en este enlace y ahí mismo viene un ejemplo para descargar y puedas aprender un poco más