Se eu tiro o primeiro paragrafo contendo a classe .oculta
funciona, mas caso contrario o seletor nth-child
não funciona. Tanto o nth-child
quanto o first-child
não funcionam por algum motivo, mesmo aparentando estar tudo certo.
Quero pegar a primeira ocorrência de uma determinada classe.
.oculta {
display: none;
}
.mostra:first-child {
background: brown
}
<p class="oculta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus repudiandae perferendis adipisci, reprehenderit ipsam, accusantium ea nulla consequatur, quam exercitationem cumque explicabo! Officiis consectetur culpa ducimus, quo quam officia omnis?</p>
<p class="mostra">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus repudiandae perferendis adipisci, reprehenderit ipsam, accusantium ea nulla consequatur, quam exercitationem cumque explicabo! Officiis consectetur culpa ducimus, quo quam officia omnis?</p>
<p class="mostra">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus repudiandae perferendis adipisci, reprehenderit ipsam, accusantium ea nulla consequatur, quam exercitationem cumque explicabo! Officiis consectetur culpa ducimus, quo quam officia omnis?</p>
<p class="mostra">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus repudiandae perferendis adipisci, reprehenderit ipsam, accusantium ea nulla consequatur, quam exercitationem cumque explicabo! Officiis consectetur culpa ducimus, quo quam officia omnis?</p>
.mostra
não éfirst-child
, pois já tem um elemento antes dele, op.oculta
. Ou seja, o únicofirst-child
nesse caso é o<p class="oculta">
.first-child
pega o primeiro filho de alguma coisa. O primeiro.mostra
não é primeiro filho de nenhum elemento.