Selectores

A través de los selectores podemos indicar al navegador a qué elementos de html queremos que se apliquen los estilos cuando los estemos definiendo en bloque o en una hoja de estilos externa. El más importante es el selector universal, el asterisco, que nos sirve para aplicar a todos los elementos:

Por ejemplo, este código está definiendo un margen y un padding igual a cero para todos los elementos de la página, sin excepción.

 * {
  margin:0;
  padding:0;
 } 

Selector de tipo o etiqueta

Simplemente designa a qué etiqueta de html o xhtml hay que aplicarle los estilos. Por ejemplo, esta regla indica que se le aplique color rojo a todo aquel texto que esté dentro de una etiqueta <p>

 p { color:red; } 

Selector descendiente

Utilizado para aplicarse a elementos que estén dentro de otros elementos. En el siguiente ejemplo se le aplica color rojo al texto que esté dentro de un em que a su vez esté dentro de un párrafo.

 p em { color:red; } 

Selector hijo

Funciona de una manera parecida al selector descendiente, pero es mucho más específico que éste.

 p > em { color:red; } 

¿Cuál es la diferencia? Pues que si el em estuviese dentro de otro elemento dentro del párrafo, por ejemplo un span, sería "nieto" (para entendernos), no hijo del p, por lo tanto no se aplicaría el texto en color rojo. En cambio si fuese un selector descendiente normal sí se aplicaría, porque se aplica a todos los em dentro del p, sea cual sea el nivel de profundidad.

Selector hermano adyacente

Este selector se usa para aplicar la regla a un elemento que está a continuación de otro. Por ejemplo, es muy útil para separar párrafos que van unos a continuación de otros en el html.

 p + p { margin-top:10em; } 

Selectores de atributo

Permiten aplicar las reglas css en función de los atributos del elemento. El siguiente ejemplo aplica un margen a todas las imágenes que dispongan del atributo alt:

 img[alt] { margin:10em; } 

Se puede ser más específico, y aplicárselo a todas aquellas imágenes que tengan un alt exactamente igual a "logo":

 img[alt=logo] { margin:10em; } 

Si lo que se pretende es referenciar una imagen que contenga la palabra "logo" dentro de una lista de palabras separadas por espacios, por ejemplo, dentro del atributo alt:

 img[alt~=logo] { margin:10em; } 

Y finalmente tenemos:

 *[lang|="es"] { color:#d2d2d2; } 

Que aplica el estilo a cualquier elemento que contenga "es" en una lista de palabras separadas por guiones en el valor del atributo lang.

Selectores de clase

Las clases nos permiten seleccionar directamente un elemento en concreto a través de su nombre independientemente del tipo de elemento que sea. Por ejemplo, identificando este párrafo como "mitexto":

 <p class="mitexto">Lorem ipsum dolor sit amet,consectetur
   adipiscing elit.</p> 

Y ahora podemos poner ese texto en itálica indicando el nombre de la clase con un "." delante, así:

 .mitexto{ font-style: italic; } 

Selectores de ID

Funcionan de manera parecida a las clases, pero con una sutil diferencia que es muy importante, no puede haber más de un elemento con la misma ID en la misma página html. Si el párrafo del ejemplo anterior es una introducción al texto y le añadimos una ID para diferenciarlo de los demás párrafos con la clase "mitexto", el código html/xhtml sería:

 <p class="mitexto" id="introduccion">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

En la hoja de estilos se marca el ID con el símbolo "#" . 

.mitexto{ font-color: #000; } 
#introduccion { font-style: italic; } 

Obviamente no es necesario que haya definida una clase para que haya un ID.

 <p id="introduccion">Lorem ipsum dolor sit amet, 
   consectetur adipiscing elit.</p> 

Con esta CSS tendríamos el mismo  resultado visual:

 #introduccion {
   font-color: #000;
   font-style: italic; 
 } 

Importante: cada atributo ID debe ser único en cada página web del sitio. Si es necesario aplicárselo a varios elementos, entonces se debe definir una clase, no una ID.