Selectores de CSS3

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

La API de Selectors describen la forma de seleccionar elementos dentro de la página, con el fin de aplicar un determinado estilo. La API está compuesta con los selectores de las versiones 1 y 2 de CSS, ahora con la llegada de la nueva versión de CSS3 se suman aún más selectores a la lista.

En el libro de “Estudio sobre Internet Explorer 9 y los nuevos estandares web”, ya adelantaban cuales serían algunos de los selectores de los que ahora podemos hacer uso, estos se pueden clasificar en tres categorías:

1.- Pseudo-clases estructurales

Estos selectores permiten seleccionar además de las clases e ID, elementos basandonós en su posición dentro del documento:

  • :root: selecciona la raíz del documento.
  • :nth-child(n): selecciona elementos que son el n-ésimo hijo de sus padres.
  • :nth-last-child(n): selecciona elementos que son el n-ésimo hijo de sus padres, empezando a contar por el final.
  • :nth-of-type(n): selecciona elementos que son el n-ésimo hermano de un tipo.
  • :nth-last-of-type(n): igual que el anterior, pero contando desde el final.
  • :last-child: selecciona elementos que son el último hijo de sus padres.
  • :first-of-type: selecciona elementos que son el último hermano de su tipo.
  • :last-of-type: selecciona elementos que son el último hermano de su tipo.
  • :only-of-type: selecciona elementos que son el único hermano de su tipo.
  • :only-child: selecciona elementos que son el único hijo de sus padres.
  • :empty: selecciona elementos que no tienen hijos, incluidos nodos de texto.

Gracias a los selectores se hace posible un código HTML más sencillo y unas hojas de estilo CSS más completas. Este es un ejemplo de su uso:

<style>
tr:nth-child(odd) { background-color:red;}
tr:nth-child(even) {background-color:green;}
</style>
<body>
<table width="125">
<tr><td>Primera fila</td></tr>
<tr><td>Segunda fila</td></tr>
<tr><td>Tercera fila</td></tr>
<tr><td>Cuarta fila</td></tr>
</table>
</body>

2.- Pseudo-clases de estado del elemento

Estas clases permiten seleccionar elementos de la interfaz gráfica dependiendo del estado:

  • :enabled: selecciona elementos que están activados.
  • disabled: selecciona elementos que están desactivados.
  • :checked: selecciona elementos que están marcados.
  • :indetermined: selecciona elementos cuyo estado no está determinado.

3.- Otros

Los siguientes son selectores que no pertenecen a ninguna de las anteriores categorías:

  • :target: selecciona un elemento que se corresponde con un enlace con nombre (named archor) dentro de la página.
  • :not(s): selecciona los elementos que no cumplen un selector simple pasado como parámetro.
  • :selection: selecciona cualquier parte de la página que haya sido resaltada por el usuario.

 

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.