carlos-sanchez
11/14/2013 - 3:54 AM

CSS3 Selectors.

CSS3 Selectors.

/* SELECTORES DE ATRIBUTOS */

/*info ampliada en http://www.netmagazine.com/tutorials/discover-power-css3-selectors */


/*
elemento[atributo^="valor"]{...}
selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
Ejemplo: Selecciona todos los enlaces que apuntan a una dirección de correo electrónico
*/
a[href^="mailto:"] { ... }



/*
elemento[atributo$="valor"]
selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
Ejemplo: Selecciona todos los enlaces que apuntan a una página HTML
*/
a[href$=".html"] { ... }


/*
elemento[atributo*="valor"]
selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
Ejemplo: Selecciona todos los títulos h1 cuyo atributo title contenga la palabra "capítulo" 
*/
h1[title*="capítulo"] { ... }



/*
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, 
pero cambia su sintaxis y ahora se utilizan :: en vez de : delante del nombre de cada pseudo-elemento:

::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.


CSS 3 añade además un nuevo pseudo-elemento:

::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.

*/


/*
Otro de los nuevos selectores que incluirá CSS 3 es :not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector:

:not(p) { ... }  /* selecciona todos los elementos de la página que no sean párrafos */
:not(#especial) { ... }  /* selecciona cualquier elemento cuyo atributo id no sea "especial" */