13-junio-2012
admin

Nuevos selectores en CSS3

En CSS3 se han añadido nuevos selectores, que se unen a los ya existentes en CSS2. A continuación pueden verse algunos de ellos:

Selectores de atributos
A partir del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
a[href^=”http:”] { … }
Fin del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
a[href$=”.com”] { … }
Cualquier sub-cadena del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
img[src*=”fotos”] { … }

Combinar hermanos
Este selector permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 se escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento h3 independientemente de qué elementos se encontraban en el medio.


Los pseudo-elementos
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3 (aunque cambia su sintaxis se utiliza :: en vez de : delante del nombre de cada pseudo-elemento:
::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado (este es nuevo en CSS3).

Los pseudo-clases
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
:not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector.

Dejar un comentario

Categorias

Linkedin