Selector de Etiquetas
Cada etiqueta en HTML puede ser seleccionada por su nombre a través de CSS.
Ejemplo
html {}: Selecciona el elemento HTML del documento.
body {}: Selecciona el elemento body del documento.
p {}: Selecciona todos los elementos p del sitio.
a {}: Selecciona todos los elementos a del sitio.
Podemos especificar un poco más nuestros selectores agregando elementos a éste:
p a{}: Selecciona todos los elementos "a" que estén contenidos dentro de un elemento "p".
ul li{}: Selecciona todos los elementos li que estén contenidos dentro de un elemento "ul"
ID
ID es un atributo de HTML que podemos aplicar a nuestras etiquetas.
La característica principal de éste es que es único, por lo tanto, ningún otro elemento en el documento puede tener el mismo ID
Ejemplo
HTML
<div id="contenedor">
Para seleccionar este elemento en CSS utilizamos el caracter '#' seguido del valor del ID:
CSS
#contendedor{};
Ahora, todas las reglas que apliquemos a este elemento sólo tendrán efecto en el elemento div cuyo ID sea "contenedor"
Mezclar ID con etiquetas en CSS
Podemos crear selectores más avanzados mezclando selectores, por ejemplo:
#contenedor p{}: Esta regla selecciona todos los elementos "p" que estén contenidos dentro del elemento cuyo ID sea "contenedor"
Class
Al igual que ID, Class es un atributo de HTML que podemos aplicar a nuestras etiquetas.
A diferencia que el elemento anterior, el atributo class lo podemos aplicar a tantos elementos como queramos, es decir, podemos reutilizar nuestras classes.
Ejemplo
HTML
<h1 class="titulo">
Para seleccionar este elemento en CSS utilizamos el punto (.) seguido del valor de la class:
CSS
.titulo{};
Ahora, todas las reglas que apliquemos a este elemento sólo tendrán efecto en aquellos elementos (cualquiera que sea) cuyo valor para el atributo class sea "titulo"
Mezclar class con etiquetas en CSS
Podemos crear selectores más avanzados mezclando selectores, por ejemplo:
.titulo a{}: Esta regla selecciona todos los elementos "a" que estén contenidos dentro del elemento cuya class sea "titulo"
Anidar selectores
Anidar selectores nos permite seleccionar descendientes de un elemento en un mismo selector.
Ejemplo 1
HTML
<ul>
<li>Chile</li>
<li>Argentina</li>
</ul>
Para seleccionar los elementos li dentro de esta lista, podemos utilizar>
CSS
ul li{};
Ejemplo 2
HTML
<ul>
<li>Chile
<ul>
<li>Santiago</li>
<li>Valparaiso</li>
</ul>
</li>
<li>Argentina</li>
</ul>
Para seleccionar todos los elementos li de segundo nivel utilizamos:
CSS
ul li ul li{};
Agrupar selectores
Agrupar selectores nos permite aplicar las mismas reglas CSS a un grupo de elemento CSS.
Ejemplo
CSS
p, a, ul li {};
Los selectores separados por una coma (,) indican agrupación y la regla definida se aplicará a todos los elementos "p", "a" y "ul li" del documento