Selectores

Un selector es la forma en la que elegimos a que elementos queremos asignarle atributos visuales con CSS
Los selectores pueden ser generales o particulares, es decír que puedo seleccionar varios elementos o tan solo uno y de forma muy particular
Podemos utilizar un solo selector:

selector {
  // código CSS
  // código CSS
  // código CSS
}

selector1, selector2 {
  // código CSS
  // código CSS
  // código CSS
}

Es el selector que venimos utilizando en todos los ejemplos anteriores
El selector por tipo de etiqueta nos permite elegir elementos por el nombre de la etiqueta
Este tipo de selector retorna una colección de elementos ya que selecciona todos los elementos con el mismo nombre de etiqueta
Por ejemplo podemos seleccionar los elementos p y h1 y definir que el color de texto sea blanco

p {
  color: white;
}
h1 {
  color: white;
}

Dado que ambos elementos se van a ver de la misma forma podemos escribir los selectores de la siguiente forma:

p, h1 {
  color: white;
}

Por medio del selector asterisco (*) podemos seleccionar todos los elementos
Este selector se utiliza muchas veces para borrar estilos que vienen predefinidos en el browser

* {
  color: white;
}

Los elementos HTML tiene un atributo class que nos permite asignarles un nombre de clase
En CSS podemos seleccionar los elementos por nombre de clase utilizando un punto y el nombre de la clase
Este selector afecta a todos los elementos que tengan el nombre de clase seleccionado

En CSS:

.rojo {
  color: red;
}

En HTML:

<p class="rojo">Este texto es ROJO</p>

Podemos hacer un selector más particular si queremos seleccionar sólo algunos elementos que tengan una determinada clase
Si queremos seleccionar sólo los títulos H1 que tienen una clase rojo podemos hacerlo de la siguiente forma:

En CSS:

h1.rojo {
  color: red;
}

En HTML:

<h1 class="rojo">Este texto es ROJO</h1>
<p class="rojo">Este texto es NEGRO</p>

Este último selector sólo selecciona los elementos del tipo h1 que tienen la clase rojo

Los elementos HTML tienen un atributo ID que nos permite seleccionarlos de forma única
Con CSS podemos seleccionar los elementos por ID utilizando el símbolo de numeral (#) y el nombre del ID del elemento
Este es un selector individual ya que solo modifica un solo elemento
Si queremos seleccionar el elemento que tiene el ID principial y establecer el texto en azul lo podemos hacer de la siguiente manera:

En CSS:

#principal {
  color: blue;
}

En HTML:

<div id="principal">Contenido de mi div en AZUL</div>

Hijos

En el ejemplo anterior vemos como podemos seleccionar sólo los párrafos que son hijos de un elemento div