CSS básico: cómo usar una clase dentro de otra clase

¿Quiere aplicar un estilo CSS a una clase dentro de otra clase? En este tutorial, te mostraré todo lo que necesitas saber para usar las clases de CSS.

Para anidar clases o cualquier otro selector en CSS, simplemente separe la jerarquía del selector con espacios. Ejemplo:.parent .child { /* CSS Properties */ }

Supongamos que tiene el siguiente código y desea aplicar el estilo solo al <h1 class="post-title">que está dentro de <article class="blog-post">.

<article class="blog-post">
	<h1 class="post-title">Blog title</h1>
	<p>Article content</p>
</article>

Su archivo CSS será así:

.blog-post .post-title {
	/* CSS Properties */
	color: grey;
}

Todos los h1 con la clase “post-title” que están dentro de la clase “blog-post” reciben la propiedad CSS. Incluso si están anidados dentro de otras etiquetas. Mientras todo esté fuera de “blog-post”, la regla no se aplicará.

Para fines de demostración, si queremos aplicar el mismo efecto a todos los h1, independientemente de la clase:

.blog-post h1 {
	/* CSS Properties */
	color: grey;
}

Puede usar cualquier selector de CSS mientras anida con espacios, puede usar selectores de ID con #id-name, selectores de etiquetas como h1, pseudoclases, etc.

Seleccionar solo el hijo directo

Si tiene el código a continuación y desea aplicar el color gris solo en los enlaces que son elementos secundarios directos del pie de página, y no en el enlace dentro de los derechos de autor div:

<footer>
	<a href="index">Home</a>
	<a href="blog">Blog</a>

	<div class="copyright">
		<a href="#">website.com</a>
	</div>
</footer>

footer > a {
	color: grey;
}

Seleccionar solo el primer hijo

Tomemos el mismo ejemplo anterior, pero ahora la diferencia es que desea aplicar la jerarquía solo al primer enlace.

<footer>
	<a href="index">Home</a>
	<a href="blog">Blog</a>

	<div class="copyright">
		<a href="#">website.com</a>
	</div>
</footer>

El siguiente código aplicará el gris tanto al primer elemento secundario del pie de página como al primer elemento secundario de .copyright.

footer a:first-child {
	color: grey;
}

Para aplicar solo al primer elemento secundario del pie de página:

footer > a:first-child {
	color: grey;
}

Seleccionar solo el último hijo

Es bastante común en las listas seleccionar el último elemento de la lista y darle un estilo diferente, sin el borde de separación inferior, por ejemplo. El código es el mismo, solo tenemos que cambiar el selector.

<ul class="menu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

ul.menu li {
	border-bottom: 1px solid grey;
}

ul.menu li:last-child {
	border-bottom: 0;
}