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 {...}.
No hay comentarios:
Publicar un comentario