Seleccionar elementos

facebook-svg gplus-svg twitter-svg

Elemento

Para seleccionar todos los elementos que tienen el mismo nombre de etiqueta ( tag name ) utilizamos el nombre de la etiqueta como selector:

ul{ list-style:none; }

Lista de elementos

Podemos seleccionar una lista de elementos utilizando una coma , como separador entre los diferentes nombres de la etiqueta

ul, ol { list-style-position: outside; }

Elementos descendientes

Para seleccionar los elementos descendientes de un cierto elemento utilizamos un espacio como combinador. Por ejemplo ul li selecciona todos los elementos li situados dentro de listas sin orden ul.

ul li{ display: inline-block;}

Los elementos descendientes de un elemento ( padre ) son aquellos elementos anidados dentro del elemento padre o dentro de elementos hijos del elemento padre. Si necesitamos seleccionar solo los elementos hijos directos ( solo el primer nivel ) utilizamos el combinador > ( mayor que )

Elementos hijos

Para seleccionar los elementos hijos directos del elemento padre ( solo el primer nivel ) utilizamos el combinador > ( mayor que )

No será seleccionado

Será seleccionado

Será seleccionado

  • li1
  • li2

Será seleccionado

No será seleccionado

ol > li{ 
    color:red;
}

Elementos hermanos (~)

Podemos utilizar el combinador ~ ( tilde ) para seleccionar los elementos hermanos ( elementos descendientes del mismo elemento padre ) de esta manera:

div ~ p { color:red; }

Esto selecciona a todos los elementos hermanos <p> precedidos por un <div>; aunque el hermano previo adyacente no es un <div>

El div

Será seleccionado

Será seleccionado

  • li1
  • li2

Será seleccionado

No será seleccionado

Observación: En algunos navegadores antiguos esto no funciona con pseudo-selectores. Ejemplo:

:checked ~ p { color:red; }

Será seleccionado

Será seleccionado

  • li1
  • li2

Será seleccionado

No será seleccionado

Elementos hermanos adyacentes

Podemos seleccionar un elemento situado inmediatamente después de otro ( elementos hermanos! ) utilizando el combinador +.

Por ejemplo si tenemos este HTML:

podemos seleccionar al elemento <label> siguiente utilizando este selector:

input[required] + label {text-decoration: underline;}

Esto selecciona al elemento label que viene inmediatamente después de un campo obligatorio ( elemento input que tiene un atributo required )