lunes, 5 de mayo de 2014

Los selectores CSS 2



1. Funcionalidad

Los selectores sirven para indicar a qué elementos se les van a aplicar los estilos definidos.


2. Los selectores

Debemos recordar que la recomendación CSS 2.1 ya proponía una amplia lista de selectores. 
  • Selector universal: permite aplicar un estilo a la totalidad de los elementos HTML de la página. Sintaxis: * {...}. 
  • Selector de elemento o de tipo: permite aplicar un estilo a un elemento HTML existente. Sintaxis: p {...}. 
  • Selector de clase: permite aplicar un estilo a los elementos que utilicen esa clase. Sintaxis: .intro {...}. 
  • Selector de clase de un elemento: permite aplicar un estilo a un elemento específico que utilice dicha clase. Sintaxis: p.intro {...}. 
  • Selector de descendientes: permite aplicar un estilo a un elemento determinado que se encuentre dentro de un elemento específico. Sintaxis: p .nombrePropio {...}. 
  • Selector hijo: permite aplicar un estilo al primer elemento hijo de un elemento específico. Sintaxis: p>.nombrePropio {...}. 
  • Selector adyacente: permite aplicar un estilo al elemento que se encuentre a continuación de un elemento específico. Sintaxis: h1+h2 {...}. 
  • Selector de atributo: permite aplicar un estilo a un elemento que utilice un atributo específico. Sintaxis: p[lang] {...}. 
  • Selector de ID: permite aplicar un estilo a un elemento que disponga de un código de identificación único. Sintaxis: #bannerSuperior {...}.

3. Las pseudo-clases

Las pseudo-clases se añaden al selector de manera que podamos aplicar un formato específico. 
  • La pseudo-clase first-child permite aplicar un estilo al primer elemento hijo de un elemento. Sintaxis: ul li:first-child {...}. 
  • Las pseudo-clases de vínculos permiten aplicar estilos a los vínculos en función de su estado (visitado y no visitado). Sintaxis: a:link {...} y a:visited {...}. 
  • Las pseudo-clases dinámicas permiten aplicar estilos a los vínculos cuando se pasa el ratón por encima o cuando se ha hecho clic en ellos, así
  • como a los campos de los formularios que estén activos. Sintaxis: a:hover {...}, a:active {...} y .campoTexto:focus {...}. 
  • La pseudo-clase de lenguaje permite aplicar estilos en función del idioma especificado. Sintaxis: :lang(es) {...}.


4. Los pseudo-elementos

Los pseudo-elementos se añaden a un selector de manera que podamos aplicar un formato específico. 
  • Los pseudo-elementos de primera letra y de primera línea. Con el pseudo-elemento de primera letra es posible aplicar un estilo a la primera letra de un elemento.
Sintaxis: .especial:first-letter {...}.
Se sigue el mismo principio para la primera línea.
Sintaxis: .especial:first-line {...}. 
  • Los pseudo-elementos antes y después. Con estos pseudo-elementos es posible generar texto antes o después de un elemento determinado. 
Sintaxis: .nota:before {...} y .destacado:after {...}.


5. La agrupación de selectores

La agrupación de selectores permite aplicar propiedades comunes a diferentes selectores.

Sintaxis: h1, .special, p.intro {...}.



Espero haber ayudado en algo. Hasta la próxima oportunidad!





No hay comentarios:

Publicar un comentario en la entrada