Con la masiva utilización de CSS como sistema de maquetación de páginas web están apareciendo gran cantidad de utilidades y «trucos» para optimizar nuestras hojas de estilos. Esto nos ofrece un mayor control sobre los elementos de nuestro HTML sin necesidad de sobrecargar el HTML con clases y ID’s que realmente no necesitamos.
Para conseguir parte de estas mejoras, deberemos usar los llamados selectores, que en resumen son una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro HTML. Similar al funcionamiento de las expresiones regulares para el texto, los selectores nos permiten usar caracteres especiales para referirnos a un elemento o un rango de los mismos.
Selectores
| Selector | Descripción
|
| * | Selector niversal, son todos los elementos del CSS |
| E | E representa cualquier elemento del tipo E (span, p, …) |
| E F | Todos los elementos F que sean descendentes de E |
| E > F | Todos los elementos F que sean hijos de E |
| E:first-child | De esta forma podemos seleccionar el primer elemento de tipo E |
| E:link , E:visited | Selecciona los elementos E que sean un enlaces y no hayan sido visitados (:link) y los si visitandos (:visited) |
| E:active , E:hover , E:focus | Selecciona los elementos de tipo E , en sus correspondientes acciones. |
| E:lang(c) | Cogemos los elementos del tipo E que estén en el idioma (humano) especificado en (c). |
| E + F | Se trata de cualquier elemento F inmediatamente despues del elemento del tipo E |
| E[foo] | Elementos del tipo E con el atributo foo |
| E[foo=»ejemplo»] | Elementos del tipo E con el atributo foo igual a «ejemplo» |
| E[foo~=»ejemplo»] | Elementos del tipo E con el atributo foo contenga «ejemplo». Se pueden añadir varias palabras separadas por espacios. ( ~ =ALT + 0126) |
| E[lang|=»es»] | Similar al anterior, pero se referirá a todos los elemento E tal que su atributo lang comienze por «es». Por ejemplo: «es_ES», «es_CA»,… |
| E[foo$=»ejemplo»] | Elementos del tipo E en el que el atributo foo termine con «ejemplo». |
| DIV.ejemplo | Todos los elementos DIV que sean de la clase ejemplo |
| E#miID | El elemento E en el que su ID sea igual miID |
Ampliando los selectores
Además de estos no pocos selectores podemos, aún más, conseguir filtrar más la busqueda de elementos, para ello usaremos pseudo-elementos.
:first-line
Se refiere a la primera línea del elemento, normalmente usado para para elemetos de texto.
p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
<p>Some text that ends up on two or more lines</p>
Propiedades:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter
La primera letra del elemento, tambien suele usarse para elementos de texto.
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
<p>The first words of an article.</p>Propiedades:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if ‘float’ is ‘none’)
- text-transform
- line-height
- float
- clear
:before
Elemento usado para insertar algún contenido delante de un elemento.
h1:before { content: url(beep.wav) }:after
Elemento usado para insertar algún contenido al final del elemento.
h1:after { content: url(beep.wav) } pseudo-elementos y CSS clases.
Nos permite encadenar varios selectores para conseguir focalizar en un elemento un pseudo-elemento concreto.
p.article:first-letter {color: #FF0000}
<p class="article">A paragraph in an article</p> Multiples pseudo-elementos
Además nos permite utilizar varios pseudo-elementos sobre un mismo elemento.
p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}
<p>The first words of an article</p>Compatibilidad
| Pseudo-elemento | IE | F | N | W3C |
|---|---|---|---|---|
| :first-letter | 5 | 1 | 8 | 1 |
| :first-line | 5 | 1 | 8 | 1 |
| :before | 1.5 | 8 | 2 | |
| :after | 1.5 | 8 | 2 |
Actualización
En QuirksMode encuentro una tabla de compatibilidades con todos los navegadores.
9 comentarios, 17 referencias
+
#