Selectores

En esta página se trata:

Selectores de tipo: E, E.e y E#e

Si se escribe una etiqueta (E), las propiedades afectan a todos los elementos con etiqueta E. En el ejemplo siguiente, todos los párrafos <p> se ven de color rojo.

p { color: red; }

Esto es un párrafo <p>. Esto es otro párrafo <p>.

Si se escribe una etiqueta seguida de un punto y un nombre de clase (E.e), las propiedades afectan a todos los elementos con etiqueta E cuyo atributo class tenga el valor e. En el ejemplo siguiente, sólo los párrafos <p> de clase "aviso" se ven de color rojo.

p.aviso { color: red; }

Esto es un párrafo <p>. Esto es un párrafo <p> de clase "aviso".

Si se escribe una etiqueta seguida de una almohadilla y un nombre de id (E#e), las propiedades afectan al elemento con etiqueta E cuyo atributo id tenga el valor e. En el ejemplo siguiente, sólo el párrafo <p> de id aviso se ve de color rojo.

p#aviso { color: red; }

Esto es un párrafo <p> de clase "aviso". Esto es un párrafo <p> con id "aviso".

Hay que tener en cuenta que el atributo id no se puede repetir, es decir, no puede haber dos elementos con el mismo valor del atributo id (independientemente de que los elementos tengan etiquetas iguales o distintas).

Volver al índice

Selectores universales: *, . y #

Si se escribe un asterisco (*), las propiedades afectan a todos los elementos de la página. En el ejemplo siguiente, tanto el párrafo <p> como la dirección <address> se ven de color rojo.

* { color: red; }

Esto es un párrafo <p>. Esto es una dirección <address>.

Para definir una clase que afecte a cualquier etiqueta, se debe escribir un punto y el nombre de la clase. En el ejemplo siguiente, cualquier elemento de clase "aviso" se verá de color rojo.

.aviso { color: red; }

Esto es un párrafo sin clase pero con un <span> de clase "aviso" (en la palabra "pero"). Esto es un párrafo <p> de clase "aviso". Esto es una dirección <address> de clase "aviso".

Para definir un id que afecte a cualquier etiqueta, se debe escribir una almohadilla y el nombre de id. En el ejemplo siguiente, el elemento de id "aviso" se verá de color rojo.

	#aviso { color: red; }	Esto es un párrafo <p> de clase "aviso". Esto es un párrafo <p> con id "aviso".
	#aviso { color: red; }	Esto es una dirección <address> de clase "aviso". Esto es una dirección <address> con id "aviso".

Hay que tener en cuenta que el atributo id no se puede repetir, es decir, que no puede haber en una página web dos elementos con el mismo valor del atributo id (independientemente de que los elementos tengan etiquetas iguales o distintas).

Volver al índice

Selectores de descendientes: E F

Si se escriben dos etiquetas seguidas (E F), las propiedades afectan a los elementos con la segunda etiqueta (F) contenidos dentro de la primera etiqueta (E), aunque haya etiquetas intermedias. En el ejemplo siguiente, todos los párrafos <p> dentro de una división <div> se ven de color rojo.

div { border: red 3px solid; margin: 10px; padding: 10px;} div p { color: red; }

Esto es un párrafo <p>. Esto es un párrafo <p>. Esto es una lista Esto es un párrafo <p> dentro de una lista Esto es otro párrafo <p>. Esto no es un párrafo <p>, sino una dirección <address>. Esto es otro párrafo <p>.

En general, si se escriben varias etiquetas seguidas (E F G ... ), las propiedades afectan a los elementos con la última etiqueta contenidos dentro de la etiqueta anterior, contenidos a su vez dentro de etiqueta anterior y así sucesivamente, aunque haya etiquetas intermedias. En el ejemplo siguientes, únicamente los párrafos <p> dentro de un elemento de lista <li> dentro de una división <div> se ven de color rojo.

div { border: red 3px solid; margin: 10px; padding: 10px;} div li p { color: red; }

Esto es un párrafo <p>. Esto es un párrafo <p>. Esto es una lista Esto es un párrafo <p> dentro de una lista Esto es otro párrafo <p>. Esto no es un párrafo <p>, sino una dirección <address>. Esto es otro párrafo <p>.

Volver al índice

Selectores de hijos: E > F

Si se escriben dos etiquetas seguidas separadas por un signo "mayor que" (E > F), las propiedades afectan a los elementos con la segunda etiqueta (F) contenidos dentro de la primera etiqueta (E), pero no afecta si hay etiquetas intermedias entre ellos. En el ejemplo siguiente, únicamente los párrafos <p> dentro de una división <div> sin elementos intermedios se ven de color rojo.

div { border: red 3px solid; margin: 10px; padding: 10px;} div > p { color: red; }

Esto es un párrafo <p>. Esto es un párrafo <p>. Esto es una lista Esto es un párrafo <p> dentro de una lista Esto es otro párrafo <p>. Esto no es un párrafo <p>, sino una dirección <address>. Esto es otro párrafo <p>.

Nota: Internet Explorer 6 no reconocía este selector.

Volver al índice

Selectores de adyacentes: E+F

Si se escriben dos etiquetas seguidas separadas por un signo "más" (E + F), las propiedades afectan únicamente a los elementos con la segunda etiqueta (F) que van justo después de un elemento con la primera etiqueta (E). En el ejemplo siguiente, únicamente el párrafo <p> inmediatamente posterior a la división <div> se ven de color rojo.

div { border: red 3px solid; margin: 10px; padding: 10px;} div + p { color: red; }

Esto es un párrafo <p>. Esto es un párrafo <p>. Esto es una lista Esto es un párrafo <p> dentro de una lista Esto es otro párrafo <p>. Esto no es un párrafo <p>, sino una dirección <address>. Esto es otro párrafo <p>. Esto es otro párrafo <p>.

Nota: Internet Explorer 6 no reconocía este selector.

Volver al índice

Selectores de atributo

Hay cuatro formas de seleccionar elementos con determinados atributos: E[atributo], E[atributo="valor"], E[atributo~="valor"], E[atributo|="valor"].

Si se escribe una etiqueta seguida del nombre de un atributo entre corchetes, E[atributo], las propiedades afectan a todos los elementos que tengan establecidos ese atributo. En el ejemplo siguiente, los párrafos con clase, independientemente de la clase asignada, se muestran en mayúsculas.

p.p1 { color: red; } p.p2 { color: blue; } p[class] { text-transform: uppercase; }

Esto es un párrafo <p> de clase p1. Esto es un párrafo <p> de clase p2. Esto es un párrafo <p> sin clase.

Si se escribe una etiqueta seguida del nombre de un atributo igual a un valor entre corchetes, E[atributo="valor"], las propiedades afectan a todos los elementos que tengan establecidos ese atributo exactamente con ese valor. En el ejemplo siguiente, el párrafo con dos clases, en un orden determinada, se muestran en mayúsculas.

p.p1 { color: red; } p.p2 { color: blue; } p[class="p1 p2"] { text-transform: uppercase; }

Esto es un párrafo <p> de clase p1. Esto es un párrafo <p> de clase p2. Esto es un párrafo <p> con clase p1 y p2 (en ese orden). Esto es un párrafo <p> con clase p2 y p1 (en ese orden).

Si se escribe una etiqueta seguida del nombre de un atributo tilde-igual a un valor entre corchetes, E[atributo~="valor"], las propiedades afectan a todos los elementos que tengan establecidos ese atributo con ese valor (entre otros).

Si se escribe una etiqueta seguida del nombre de un atributo |-igual a un valor entre corchetes, E[atributo|="valor"], las propiedades afectan a todos los elementos que tengan establecidos ese atributo con un valor que comience por ese valor seguido de un guión -. Este selector esta pensado para seleccionar elementos con diferentes variante de un mismo idioma.

Volver al índice

Selectores de pseudo-clases y pseudo-elementos

Las pseudo-clases y los pseudo-elementos están explicados en otra página.

Volver al índice