Seleccionar elementos
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 )