Next sibling with class in CSS / SCSS

Question

I have a small list with the following classes

<ul>
<li class="first"></li>
<li class="first"></li>
<li class="first"></li>
<li class="first"></li>
<li class="first--blue"></li>
<li class="first--blue"></li>
<li class="first--blue"></li>
<li class="first"></li>
<li class="first"></li>
</ul>

Now I want to change the class of the <li class="first--blue"></li> to have a blue background, but I want to change it only to the first "first--blue" not the other ones

You could give it an id or another class. Why do those three list items need to have the same class, if they don't use the same CSS settings? — Geshode, Jul 27 '20 at 07:58
@Geshode the list is coming from an API, I can't change the classes or ids nor I can use JS — loliki, Jul 27 '20 at 08:01

score 2 · Accepted Answer · answered Jul 27 '20 at 08:01

You can use .first--blue ~ .first--blue to indicate the first--blue that is not the first one.

Just remember to set anything that defined in .first--blue to its initial state in .first--blue ~ .first--blue.

li {
  height: 10px;
}

/* The first first--blue */
.first--blue {
  background-color: blue;
}

/* Other first--blue */
.first--blue ~ .first--blue {
  background-color: initial;
}

<ul>
  <li class="first"></li>
  <li class="first"></li>
  <li class="first"></li>
  <li class="first"></li>
  <li class="first--blue"></li>
  <li class="first--blue"></li>
  <li class="first--blue"></li>
  <li class="first"></li>
  <li class="first"></li>
</ul>

That did the trick, thanks :) – loliki Jul 27 '20 at 08:06 — loliki, Jul 27 '20 at 08:06

score 1 · Answer 2 · answered Jul 27 '20 at 08:07

1

You can only apply first child property to a certain tag, but not to a class. Here are detailed explaination on how to apply all class and then undo to achieve the first child class property answered previously.

answered Jul 27 '20 at 08:07

Ray

67
1
6

Next sibling with class in CSS / SCSS

2 Answers2