Selectores de CSS y Ejercicio 2

← Diseño Web ⌂ Home

Tipos de selectores en CSS

Los selectores de CSS tienen el objetivo de identificar los elementos que queremos estilizar. Como lo vimos anteriormente:

h1 {
    color: red;
}

En este código le estamos diciendo al navegador que queremos poner en color rojo todos los textos que estén dentro de la etiqueta <h1>.

Pero existen diferentes formas de poder usar los selectores, veamos las más populares.

Selector de etiqueta

Un selector de etiqueta hace referencia a etiquetas HTML, como en el siguiente ejemplo:

h1 {
    color: red;
}

Selector descendiente

Hacen referencia a etiquetas HTML de forma hereditaria, como su nombre lo dice, por ejemplo, aplica un color a todos las etiquetas <a> que se encuentren dentro de una etiqueta <li>.

li a {
    color: red;
}

Selectores de clase

Este tipo de selector funciona con ayuda del atributo class en el elemento html, por ejemplo:

<h2 class="texto-rojo">Venta de playeras</h2>

Observamos que se agregó class="texto-rojo" y la sintaxis en CSS para poder aplicar dicho color, se realiza de la siguiente forma:

.texto-rojo {
    color: red;
}

Se pueden aplicar múltiples clases en un mismo elemento, únicamente separando el nombre de la clase de CSS por un espacio:

<h2 class="texto-rojo fondo-negro">Venta de playeras</h2>
.texto-rojo {
    color: red;
}

.fondo-negro {
    background: black;
}

Selectores de id

Así como los selectores de clase y el atributo class, a los elementos de HTML también se les puede aplicar un id por medio del atributo id.

<div id="banner-principal">
    ¡Bienvenidos! 
</div>

Y la sintaxis en CSS sería la siguiente:

#banner-principal {
    color: white;
    background: black;
}

Nota: los ids son únicos, por lo tanto, no debes repetirlo en el mismo documento de HTML.

Combinando selectores de CSS

Y lo mejor de todo es que puedes combinar los tipos de selectores en un mismo elemento de HTML, por ejemplo:

<ul class="lista">
    <li id="edicion-limitada">Playera de <span>Batman</span> edición limitada.</li>
    <li>Playera de <span>Superman</span>.</li>
</ul>

¿Qué tipos de selectores logras identificar?

ul li span {
    color: orange;
}
.lista #edicion-limitada {
    background: black;
}

Comentarios en CSS

Y finalmente la forma de agregar comentarios a nuestro código de CSS es mediante la siguiente sintaxis.

/* Este código hace todos los h1 rojos */
h1 {
    color: red;
}

/* Los comentarios
pueden ser de 
múltiples líneas */

En las siguientes publicaciones retomaremos nuestro ejercicio de la tienda de playeras para continuar con el código.

Ejercicio 2

El código para descarga hasta este punto de los tutoriales: Ejercicio 2