Display first element

February 3, 2022

If I have:

But with result only for first .first. The first .second is still with display none.

.first {
  display: none;
}

.first:first-of-type {
  display: block;
}

.second {
  display: none;
}

.second:first-child {
  display: block;
}

<div class="first">first</div> //I want to display only this
<div class="ro">ro</div>
<div class="first">first</div> //I want to hide this
<div class="ro">ro</div>
<div class="first">first</div> //I want to hide this
<div class="ro">ro</div>
<div class="first">first</div> //I want to hide this
<div class="ro">ro</div>
<div class="second">second</div> //I want to display only this
<div class="eo">eo</div>
<div class="second">second</div> //I want to hide this
<div class="eo">eo</div>

>Solution :

You should use the subsequent-sibling combinator ~:

.first {
    display: block;
}
.first ~ .first {
    display: none;
}
.second {
    display: block;
}
.second ~ .second {
    display: none;
}

With the formula .first ~ .first you’re instructing to apply display: none to all elements with class .first preceded by another element with class .first.