CSS selector based on classes

user_12501851 0
Viewed 44

I generally like working with CSS selectors but there is one specific case that I don't understand, and also references like this don't help me to solve this issue.

Let's say this is my code:

.zero .one:nth-child(2) {
  color: red;
}
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

<br>

<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

<br>

<div class="zero">
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div>Okay!</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

I select .zero .one:nth-child(2) what means in my understanding that every second child with the class .one of a .zero container gets selected. But in this case it takes the first and not the second <div class="one">Lol</div> of each .zero container.

The question would be: How can I select every second <div class="one">Lol</div> of each .zero container?

css
2 Answers

:nth-child(n) won't be of any-help here and :nth-class(n) does not exist as far as i know.

What you could do is to use the ~ selector, and use it twice to do a reset , no matter the structure:

example

.zero .one~.one {/* look for any class one standing somewhere after class one */
  color: red;
}

.zero .one~.one~.one {/* now if we find a third one or more; lets reset it */
  color: initial;
}


/* only for layout demo purpose, not relevant for the question */
div[class]:before {
  content: 'My class is: ' attr(class);
  color: green;
  background: yellow;
  padding-inline: 0.5em;
  margin: inline-end:1em;
}

.zero {
  background: lightgray;
}

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  gap: 1em;
}
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="two">loL</div><!-- it can be no class or another in the way, does not matter -->
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>
<div class="zero">
  <div class="one">Lol</div>
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

user_24420990

You can fix in this way for your case

.zero .one:nth-child(2n+1) {
  color: red;
}


.zero .one:nth-child(2n+1) {
  color: red;
}
<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

<br>

<div class="zero">
  <div>Bla bla bla</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
  <div class="one">Lol</div>
</div>

user_135448490
Related