Comunidad de diseño web y desarrollo en internet online

Selectores CSS3

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.

Importante: Los selectores son el "abc" del CSS. Hay que conocerlos a fondo si queremos crear un código profesional.

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:

  1. Código :

    elemento[atributo^="valor"]
    Selecciona los elementos con ese atributo y que su valor comienza por la cadena de texto indicada en "valor".
  2. 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"]{...}



Ver ejemplo

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.