Los selectores CSS 2

Regresar al índice

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!

Regresar al índice