Select first element by Classname in list of div's (css only)

Question

I want to be able to target 'lorem' only in both cases using CSS only in a list with the same HTML elements (div's in this case). So when I delete the ID from the list it should still only style the first element with class 'items__item'. Does anyone have an idea?

.items {
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.items > div {
  padding: 0 5px;
}

.items__item:first-child {
  color: green;
}

.items__item:first-of-type {
  color: green;
}

.items__item:nth-of-type(2) {
  color: red;
}

<div class="items">
  <div class="id">23432</div>
  <div class="items__item">lorem</div>
  <div class="items__item">ipsum</div>
  <div class="divider">|</div>
  <div class="items__item">dolor</div>
</div>

<div class="items">
  <div class="items__item">lorem</div>
  <div class="items__item">ipsum</div>
  <div class="divider">|</div>
  <div class="items__item">dolor</div>
</div>

Please Check this out https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class?answertab=active#tab-top — HaSnen Tai, Jun 19 '19 at 09:46

score 1 · Answer 1 · answered Jun 19 '19 at 09:55

.items {
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.items > div {
  padding: 0 5px;
}

.items div.items__item ~ div.items__item  {
  color: black;
}

.items div.items__item {
  color: red;
}

<div class="items">
  <div class="id">23432</div>
  <div class="items__item">lorem</div>
  <div class="items__item">ipsum</div>
  <div class="divider">|</div>
  <div class="items__item">dolor</div>
</div>

<div class="items">
  <div class="items__item">lorem</div>
  <div class="items__item">ipsum</div>
  <div class="divider">|</div>
  <div class="items__item">dolor</div>
</div>

Now if you remove the element with class id it will work.

Select first element by Classname in list of div's (css only)

1 Answers1