Quando descobri o nth-child, adorei. O efeito dele é aplicar um estilo a certos elementos de uma lista e a outros não. Por exemplo, tabelas listradas, que antes calculávamos na programação quais eram as linhas pares e ímpares para aplicar ou não um estilo.
Algumas vezes, me pareceu ter um comportamento estranho. De repente, eu pedia para ele pegar as linhas ímpares e ele pegava as pares. Recentemente descobri que o problema era quando havia um intruso entre os filhos. Por exemplo*:
<style>
ul li:nth-child(2n)
{
background: red;
}
</style>
<ul>
<input type="hidden" />
<li><input /></li>
<li><input /></li>
</ul>
Até esbarrar com a situação e entender, eu achava que este código deveria colorir de vermelho sempre o segundo elemento LI a cada dois. Porém, sendo nth-child, ele considera também o hidden. Sendo assim, o primeiro LI é o segundo elemento desta lista.
Quando você tenta fazer um CSS genérico para o site, com itens gerados automaticamente, isso começa a ser um problema. Me deparei com isso hoje, ao precisar adicionar uma tag script (não podia separar em arquivo js porque inclui código C#).
A solução foi um selector que eu ainda não conhecia: nth-of-type. Este sim pega apenas os LIs.
<style>
ul li:nth-of-type(2n)
{
background: red;
}
</style>
<ul>
<input type="hidden" />
<li><input /></li>
<li><input /></li>
</ul>
Não importa quantos hiddens sejam colocados ali, ele continua pintando de vermelho o segundo elemento de cada dois LI.
* Um UL não deve conter elementos fora LIs. Isto é apenas um exemplo.
Nenhum comentário:
Postar um comentário