CSS 3: Selectores

En las hojas de estilo CSS, los selectores son la parte de las reglas que indican al navegador a qué elementos se van a aplicar las propiedades incluidas en las declaraciones.

La recomendación Selectors Level 3 (2º edición), publicada en noviembre de 2018, define la sintaxis de los selectores, las pseudo-clases y los pseudo-elementos.

En esta lección se comentan únicamente los selectores simples y sus combinaciones. Las pseudo-clases y los pseudo-elementos se comentan en otra lección.

Selector de tipo: 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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector universal: *

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector de clase: E.e

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 el párrafo <p> de clase "aviso" se ven de color rojo.

p.aviso {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Para definir una clase que se pueda aplicar a cualquier etiqueta, se puede escribir como selector un punto y el nombre de la clase (.nombre-clase) o el selector universal *.nombre-clase. En los dos ejemplos siguientes, cualquier elemento de clase "aviso" se ve de color rojo.

.aviso {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
*.aviso {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector de ID: E#e

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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).


Para definir un id que se pueda aplicar a cualquier etiqueta, se puede escribir como selector una almohadilla y el nombre del id (#nombre-id) o el selector universal *#nombre-id. En los dos ejemplos siguientes, cualquier elemento con id "aviso" se ve de color rojo.

#aviso {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
*#aviso {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Aunque en una página web no puede haber dos elementos con el mismo valor del atributo id, en páginas distintas sí que puede haber dos elementos con el mismo valor del atributo id. Si la misma hoja de estilo se enlaza desde varias páginas web, el selector universal afectará en cada página a los elementos con el id correspondiente.

Selector 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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 siguiente, ú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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector 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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector de consecutivos: 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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector de hermanos: E ~ F

Si se escriben dos etiquetas seguidas separadas por un signo "tilde" (E ~ F), las propiedades afectan únicamente a los elementos con la segunda etiqueta (F) que van después de un elemento con la primera etiqueta (E), siendo ambos elementos hermanos, es decir, hijos del mismo padre. En el ejemplo siguiente, se ven de color rojo dos de los párrafos <p>. Dentro de la división, el segundo párrafo se muestra de color rojo aunque haya una lista entre ellos. Fuera de la divisón, el segundo párrafo se muestra de color rojo, mientras que el primero no porque los párrafos de dentro de la división no son sus hermanos..

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

div ~ p {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Selector 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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 (asignadas en el mismo orden en el que aparecen entre corchetes en la hoja de estilo), se muestran en mayúsculas. Además, los párrafos con dos clases se ven de color azul porque las clases no se aplican en el orden en el que aparecen en el atributo clase, sino en el orden en que aparecen en la hoja de estilo.

p.p1 {
  color: red;
}

p.p2 {
  color: blue;
}

p[class="p1 p2"] {
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 variantes de un mismo idioma.

Selector de pseudo-clases y pseudo-elementos

Las pseudo-clases y los pseudo-elementos se comentan en otra lección.