Display first element

Question

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>

The question is unclear: what do you want to show exactly? Do you want to show all div having class `.first` or `.second`? — Pasquale, Feb 03 '22 at 11:07
The first element that have the class .first and the first element that have the class .second — , Feb 03 '22 at 11:08
Please attach a screenshot or drawing of the desired outcome — vsync, Feb 03 '22 at 11:14

score 0 · Accepted Answer · answered Feb 03 '22 at 11:21

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.

Display first element

1 Answers1