1

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>

9
  • O primeiro elemento com a classe .mostra não é first-child, pois já tem um elemento antes dele, o p.oculta. Ou seja, o único first-child nesse caso é o <p class="oculta">.
    – Sam
    Commented 2/05/2019 às 10:23
  • Mas essa não seria a primeira classe? p:first-child não seria diferente de .mostra:first-child? Commented 2/05/2019 às 10:25
  • Conhece algum jeito de pegar a primeira ocorrência de uma determinada classe apenas com css? Commented 2/05/2019 às 10:26
  • Primeira classe não tem a ver com primeiro filho. O first-child pega o primeiro filho de alguma coisa. O primeiro .mostra não é primeiro filho de nenhum elemento.
    – Sam
    Commented 2/05/2019 às 10:26
  • Cara, com CSS eu não sei como faz isso.
    – Sam
    Commented 2/05/2019 às 10:35

2 Respostas 2

2

Não funciona pelo simples fato do .mostra não ser o primeiro filho dos parágrafos, mesmo tendo a primeira classe .mostra.

Você pode usar o nth-child e com isso decidir o background do mesmo:

.oculta {
  display: none;
}
.mostra:nth-child(2) {
  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>

https://developer.mozilla.org/pt-BR/docs/Web/CSS/:nth-child

1

O que acontece é que o seu primeiro child é .oculta, pois ele é o primeiro filho do body que é o pai de todos os seus elementos. Aqui vc pode ler mais a respeito Comportamento da pseudo-classe :nth-child e vc vai perceber que na verdade não existe um .mostrar:first-child, por isso a classe não aplica no elemento.

Agora para selecionar a primeira ocorrência apenas com pseudo-classes como :nth-chilt, :first-of-type etc, vc não vai conseguir fazer de forma consistente, pois caso vc coloque algum elemento antes, vc pode acabar quebrando regras como p:nth-child(n+3).

A minha dica para esse caso em específico é usar o seletor +, veja que com ele não importa quantos oculta tenham antes do mostra, ele só vai aplicar a classe caso tenha um oculta seguido de um mostra (oculta + mostra).

Deixei um comentário no código, com uma ressalva, pois sempre que acontecer um .oculta + .mostra no HTML a regra CSS vai aplicar....

.oculta + .mostra {
	background-color: brown;
}
<p class="oculta">oculta</p>
<p class="oculta">oculta</p>
<p class="mostra">mostra</p>
<p class="mostra">mostra</p>
<p class="mostra">mostra</p>
<p class="oculta">oculta</p>
<!-- <p class="mostra">mostra</p> esse element tb vai ficar com o BG marrom caso vc o descomente, pois ele é um elemento .MOSTRA mas que tem um .OCULTA antes dele-->

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .