Seleccionar elementos CSS

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 )

<section>
  <div><p>No será seleccionado</p></div>
    <p>Será seleccionado</p>
    <p>Será seleccionado</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
  </ul>
  <p>Será seleccionado</p>
</section>
<p>No será seleccionado</p>

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>

<section>
  <div><p>El div</p></div>
    <p>Será seleccionado</p>
    <p>Será seleccionado</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
  </ul>
  <p>Será seleccionado</p>
</section>
<p>No será seleccionado</p>

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

:checked ~ p { color:red; }

<section>
  <input type="checkbox" checked="">
    <p>Será seleccionado</p>
    <p>Será seleccionado</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
  </ul>
  <p>Será seleccionado</p>
</section>
<p>No será seleccionado</p>

Elementos hermanos adyacentes

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

Por ejemplo si tenemos este HTML:

<form>
<input type="text" id="input0" required="">
<label for="input0">una etiqueta</label>

<textarea rows="4" cols="50" id="ta0"></textarea>
<label for="ta0">una etiqueta para textarea</label>
</form>

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 )