Created
November 14, 2013 03:54
-
-
Save carlos-sanchez/7461081 to your computer and use it in GitHub Desktop.
CSS3 Selectors.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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" */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment