Select the first occurrence of the class using css

Asked

Viewed 634 times

1

If I take the first paragraph containing the class .oculta works, but otherwise the selector nth-child does not work. Both the nth-child as to the first-child do not work for some reason, even though everything seems to be right.

I want to catch the first occurrence of a certain class.

.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>

css

  • The first element with the class .mostra is not first-child, because it already has an element before it, the p.oculta. That is, the only first-child in this case is the <p class="oculta">.

  • But wouldn’t that be the first class? p:first-Child would be no different from . shows:first-Child?

  • Know some way to get the first occurrence of a certain class only with css?

  • First class has nothing to do with first child. The first-child takes the first child of something. The first .mostra is not the first child of any element.

  • Dude, with CSS I don’t know how it does it.

  • @hugocsl has a way of doing it there?

  • @Sam the way he asked it ends up being duplicated anyway, but this questioning in the comment changes things a little... I’m even testing here, but I believe the easiest way would be to include an extra class in the first type element mostrat n1, but I’m still testing.

  • Otavio the way you ask leaves the question as duplicate, but I urge you to edit and ask as something like "Select the first occurrence of the class" or something like, then I remove the duplicate ok

  • All right, I edited ^_^

Show 4 more comments

2 answers

2

It does not work simply because . shows not to be the first child of paragraphs, even having the first class . shows.

You can use Nth-Child and with it decide the background of it:

.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/en-US/docs/Web/CSS/:Nth-Child

1

What happens is your first child is .oculta, for he is the first son of body who is the father of all its elements. Here you can read more about Behaviour of the pseudo-class :Nth-Child and you’ll realize that there really isn’t a .mostrar:first-child, therefore the class does not apply to the element.

Now to select the first occurrence only with pseudo-classes as :nth-chilt, :first-of-type etc, you will not be able to do consistently, because if you put some element before, you may end up breaking rules like p:nth-child(n+3).

My tip for this particular case is to use the selector +, see that with him no matter how many oculta have before the mostra, it will only apply the class if you have one oculta followed by a mostra (oculta + mostra).

I left a comment in the code, with a caveat, because whenever a .oculta + .mostra in HTML the CSS rule will apply.... 

.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-->

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.