Skip to content

Instantly share code, notes, and snippets.

@carlos-sanchez
Created November 14, 2013 03:54
Show Gist options
  • Save carlos-sanchez/7461081 to your computer and use it in GitHub Desktop.
Save carlos-sanchez/7461081 to your computer and use it in GitHub Desktop.
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" */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment