Contenido

Selectores CSS que deberias conocer

6 Sep

+ 26

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.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.