CSS Básico: Como Utilizar uma Classe dentro de outra Classe

Quer aplicar um estilo CSS em uma classe dentro de outra classe? Neste tutorial, vamos te mostrar tudo o que você precisa saber para aninhar classes CSS.

Para aninhar classes ou qualquer outro seletor em CSS, basta separar a hierarquia de seletores com espaços. Exemplo: .parent .child { /* Propriedades CSS */ }

Vamos supor que você tem o seguinte código, e quer aplicar estilo somente ao <h1 class="post-title"> que estiver dentro de <article class="blog-post">.

<article class="blog-post">
	<h1 class="post-title">Título do blog</h1>
	<p>Corpo do blog</p>
</article>

O seu arquivo CSS vai ficar assim:

.blog-post .post-title {
	/* Aqui vão as propriedades CSS */
	color: grey;
}

Todos os h1 com classe "post-title" que estiverem dentro da classe "blog-post" recebem a propriedade CSS. Inclusive se estiverem aninhados dentro de outras tags. Enquanto que para tudo que estiver fora de "blog-post" não será aplicada a mesma regra.

Para fins de demonstração, se quisessemos aplicar o mesmo efeito em todos os h1 independente de classe:

.blog-post h1 {
	/* Aqui vão as propriedades CSS */
	color: grey;
}

Você pode usar qualquer seletor CSS aninhando com espaços, pode usar seletores de id com #id-name, seletores de tag direto como no caso do h1, pseudo-classes, etc.

Selecionando apenas "filhos diretos"

Se você tem o código abaixo e quer aplicar a cor cinza apenas nos links que são filhos diretos de footer, e não no link dentro da div copyright:

<footer>
	<a href="index">Início</a>
	<a href="blog">Blog</a>

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

footer > a {
	color: grey;
}

Selecionando somente o "primeiro filho"

Vamos pegar o mesmo exemplo acima, só que agora a diferença é que você quer aplicar a hierarquia somente no primeiro link.

<footer>
	<a href="index">Início</a>
	<a href="blog">Blog</a>

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

O código abaixo vai aplicar o cinza tanto no primeiro filho de footer quanto no primeiro filho de .copyright.

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

Para aplicar somente no primeiro filho de footer:

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

Selecionando somente o "último filho"

É bem comum em listas querermos selecionar o último item da lista e dar um estilo diferente, sem a borda inferior de separação, por exemplo. O código é o mesmo, só precisamos mudar o seletor.

<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;
}