He querido comenzar este curso con la parte más teórica. En estos tres primeros temas veremos los nuevos selectores, pseudo-elementos y pseudo-clases. No voy a entrar en detalle sobre los conceptos en si porque entiendo que ya sabéis bastante de CSS y si no, aquí mismo tenéis el curso de CSS básico.
Un selector en CSS es la herramienta que nos sirve para seleccionar uno o varios elementos de los que tenemos en nuestro HTML. CSS3 incluye todos los selectores de CSS2.1 y añade algunos más.
Selectores de atributos en CSS3
En primer lugar encontramos 3 nuevos selectores de atributos:
Código :
elemento[atributo^="valor"]Selecciona los elementos con ese atributo y que su valor comienza por la cadena de texto indicada en "valor".
Código :
elemento[atributo$="valor"]Selecciona los elementos con ese atributo y que su valor termina por la cadena de texto indicada en "valor".Código :
elemento[atributo*="valor"]Selecciona los elementos con ese atributo y que su valor contiene la cadena de texto indicada en "valor".
Por ejemplo
Código :
/* Selecciona todos los enlaces que lleven a una página que contenga la palabra ejemplo*/
a[href*="ejemplo"]{...}
/*Selecciona todos los enlaces que apunten a una dirección de correo*/
a[href^="mailto:"]{...}
/*Selecciona todos los enlaces que apuntan a páginas .php*/
a[href$=".php"]{...}
Selector general de hermanos
El selector general de hermanos tiene un funcionamiento similar al selector adyacente de CSS2.1. Mientras que en el adyacente la condición es que los elementos fuesen consecutivos en el código HTML, el selector general de hermanos tiene en consideración todos los elementos que sean consecutivos aunque no lo sean en el código HTML.
Código :
/*Selector adyacente en CSS2.1*/
h1 + h2{...}
/*Selector general de hermanos de CSS3*/
h1 ~ h2{...}
<h1>Título</h1>
<h2>Subtítulo adyacente</h2>
<h1>Título</h1>
<p> párrafo de separación</p>
<h2>Subtítulo con selector general de hermanos</h2>
Ver ejemplo
En la próxima capítulo veremos las nuevos pseudo-elementos en CSS3 y su sintaxis.
Información adicional
® Cristalab 2011
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.