jueves, 7 de marzo de 2013

HTML5: Selectores CSS 2

En la anterior entrada vimos una introducción a los selectores CSS y en ella vimos algunos selectores que se introducen con la especificación de HTML5. En esta entrada vamos a ver otro tipo de selectores, los denominados pseudo-clases.

En este artículo seguiremos usando el mismo ejemplo que usamos en la entrada anterior y que tiene el siguiente aspecto:


<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p id="p1">Esto es un parráfo y dentro hay un enlace a <a id="link1" class="a1" href="http://www.bing.com">Bing</a> y otro a <a id="link2" class="a1" href="http://www.google.es">Google</a></p>
<p id="p2">Tambien podemos tener un listado de idiomas</p>
<ul id="list1">
    <li>Inglés</li>
    <li>Español</li>
    <li>Frances</li>
    <li>Alemán</li>
    <li>Italiano</li>
</ul>
:root
Personalmente desconocía este selector. Este selector selecciona el elemento raíz de un documento. Es un selector muy poco útil ya que siempre devuelve el elemento html y se incluye como novedad dentro de la especificación de HTML5.
:root { color: #FF0000 }
Selectores de hijos (child selectors)
Este selector nos ayuda a seleccionar un elemento individual que está contenido dentro de otro elemento. Podemos usar cuatro tipos de selectores
  • :fist-child: Selecciona el primer elemento de la lista de elementos.
  • :last-child: Selecciona el último elemento de la lista de elementos.
  • :only-child: Selecciona el elemento si es el único en la lista de elementos.
  • :only-of-type: Selecciona el elemento si es el único elemento en a lista y es de un tipo determinado.
Los tres últimos elementos (:last-child, :only-child y :only-of-type) son novedades de la especificación de CSS3.
ul :first-child { color: #aaddcc }
ul :last-child { color: #336699 }
Con este CSS estamos cambiando el estilo del primer y último descendiente de nuestro ul.
Selectores por posición (nth-child selectors)
Estos selectores son parecidos a los explicados anteriormente, pero se aplican en base al índice de su posición. Tenemos estos cuatro selectores
  • :nth-child(n): Selecciona el elemento que está en a posición n de la lista de elementos.
  • :nth-last-child(n): Selecciona el elemento que está en la posición n desde el último elemento de la lista de elementos.
  • nth-of-type(n): Selecciona el elemento que está en la posición n de la lista elemento, en base al tipo definido por su padre.
  • nth-last-of-type(n): Igual que el anterior, pero el índice se cuenta desde el último elemento.
Todo estos selectores son nuevos y solo se encuentran disponibles en CSS3. En el siguiente ejemplo seleccionamos dentro de los hijos de ul el 2 elemento comenzando por el primer elemento y por el último.
ul :nth-child(2) { color: #aaddcc }
ul :nth-last-child(2) { color: #336699 }
Selectores pseudo-clases
Los selectores de pseudo-clases no permiten seleccionar un elementos en base a su estado. Tenemos las siguiente pseudo-clases a nuestra disposición
  • :enabled - El selectores está habilitado.
  • :disabled - El selector está deshabilitado.
  • :checked - El selector está chequeado.
  • :default - Selecciona valores por defecto.
  • :valid e :invalid - Selecciona elementos de tipo input en base a si son validos o no (después de su valicación)
  • :in-range y :out-of-range - Selecciona elementos dentro o fuera de un rango.
  • :required y :optional - Selecciona elementos cuya presencia es obligatoria u opcional.
Todos estos selectores son introducidos en CSS3.

Selectores pseudo-clases dinámicos
  • :link y :visited - El selectores :link selecciona enlaces y el selector :visited selecciona aquellos enlaces que el usuario ya ha visitado.
  • :hover: Este selector se usa cuando el ratón se mueve por encima de un elemento.
  • :active: Este selector se usa cuando el usuario activa un elemento. Esto ocurre en la mayoría de los casos cuando el usuario hace click sobre el elemento.
Y con esto termina esta introducción a los selectores que tenemos disponibles en los CSS.

Happy coding!