Websarrolladores

Todo sobre diseño y desarrollo web

Referencia rápida

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 atributos 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.

Tema creado por Anders Norén

¿Necesitas una web?

www.sutilweb.com