Tutorial Intermediário de CSS: Agrupando e Aninhando

17 03 2008

Código CSS com seletores aninhados e agrupados

Agrupando

Você pode aplicar as mesmas propriedades a vários seletores sem precisar repetí-los. Basta separar os seletores com vírgulas.

Por exemplo, se você tem alguma coisa assim:

h2 {
	color: red;
}

.outraClasse {
	color: red;
}

.maisUmaClasse {
	color: red;
}

Você pode trocar por isso:

h2, .outraClasse, .maisUmaClasse {
	color: red;
}

Aninhando

Se o CSS estiver bem estruturado, não deve existir a necessidade de muitos seletores de classe ou ID. Isso porque você pode especificar propriedades para seletores dentro de outros seletores. Por exemplo:

#topo {
	background-color: #ccc;
	padding: 1em
}

#topo h1 {
	color: #ff0;
}

#topo p {
	color: red;
	font-weight: bold;
}

Faz com que não haja necessidade de mais classes e ID’s se estiver aplicado a um HTML que pareça com esse:

<div id="top">

	<h1>Acarajé de Chocolate</h1>

	<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

Isso acontece porque, ao separar seletores com espaços, nós estamos dizendo “h1 dentro do ID topo tem a cor #ff0” e “p dentro do ID topo é vermelho e está em negrito”.

Isso pode ficar bem complicado (porque pode se extender por mais de dois níveis, como isso dentro disso dentro disso etc.) e pode exigir um pouco de prática.

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

4 responses

2 05 2008
Tutorial Intermediário de CSS: Seletores Classe e ID « Codando

[…] Próxima página: Agrupando e Aninhando […]

21 05 2009
bruno

é possível agrupar ids e aninhar?
exemplo: #id1, #id2 a: hover img { }
tentei e nao consegui. abraço.

15 02 2010
hudson

tem um erro ai, onde deveria ser alinhar está ANINHAR.
um abraço. fui !

15 02 2010
hudson

eu disse que tinha um erro mas parece que nao eu procurei na internet e parece
que aninhar também ta certo.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: