En HTML5 la responsabilidad por la presentación de la estructura en pantalla está más que nunca en manos de CSS. Incorporaciones y mejoras se han hecho en la última versión de CSS para proveer mejores formas de organizar documentos y trabajar con sus elementos.

Selector de atributo y pseudo clases

CSS3 incorpora nuevos mecanismos para referenciar elementos HTML.

  • Selector de atributo: ahora podemos utilizar otros atributos además de id y class para encontrar elementos en el documento y asignar estilos. Con la construcción palabraclave[atributo=valor], podemos referenciar un elemento que tiene un atributo particular con un valor específico. Por ejemplo, p[name=”texto”] referenciará cada elemento <p> con un atributo llamado name y el valor ”texto”.
    CSS3 también provee técnicas para hacer esta referencia aún más específica. Usando las siguientes combinaciones de símbolos ^=, $= y *= podemos encontrar elementos que comienzan con el valor provisto, elementos que terminan con ese valor y elementos que tienen el texto provisto en alguna parte del valor del atributo. Por ejemplo, p[name^=”texto”] será usado para encontrar elementos <p> que tienen un atributo llamado name con un valor que comienza por ”texto”.
  • Pseudo Clase :nth-child(): esta pseudo clase encuentra un hijo específico siguiendo la estructura de árbol de HTML. Por ejemplo, con el estilo span:nth-child(2) estamos referenciando el elemento <span> que tiene otros elementos <span> como hermanos y está localizado en la posición 2. Este número es considerado el índice. En lugar de un número podemos usar las palabras clave odd y even para referenciar elementos con un índice impar o par respectivamente (por ejemplo, span:nthchild(odd)).
  • Pseudo Clase :first-child: Esta pseudo clase es usada para referenciar el primer hijo, similar a :nth-child(1).
  • Pseudo Clase :last-child: esta pseudo clase es usada para referenciar el último hijo.
  • Pseudo Clase :only-child: esta pseudo clase es usada para referenciar un elemento que es el único hijo disponible de un mismo elemento padre.
  • Pseudo Clase :not(): esta pseudo clase es usada para referenciar todo elemento excepto el declarado entre paréntesis.

Selectores

CSS3 también incorpora nuevos selectores que ayudan a llegar a elementos difíciles de referenciar utilizando otras técnicas.

  • Selector >: este selector referencia al elemento de la derecha cuando tiene el elemento de la izquierda como padre. Por ejemplo, div > p referenciará cada elemento <p> que es hijo de un elemento <div>.
  • Selector +: este selector referencia elementos que son hermanos. La referencia apuntará al elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. Por ejemplo, span + p afectará a los elementos <p> que son hermanos y están ubicados luego de un elemento <span>.
  • Selector ~: este selector es similar al anterior, pero en este caso el elemento de la derecha no tiene que estar ubicado inmediatamente después del de la izquierda.