CSS3 select each first item of specified classes

Question

I have the following situation:

<ul>
  <li class="a">...</li>
  <li class="a">...</li>
  <li class="a">...</li>   
  ...
  <li class="b">...</li>
  <li class="b">...</li>
  ...
  <li class="c">...</li>
  <li class="c">...</li>
  ...
</ul>

Et cetera for each letter; Now I'd want to add a pseudoelement before the first element that begins with each letter, something like:

<ul>
 A
 <li class="a">...</li>
  <li class="a">...</li>
  <li class="a">...</li>   
  ...
  B
  <li class="b">...</li>
  <li class="b">...</li>
  ...
  C
  <li class="c">...</li>
  <li class="c">...</li>
  ...
</ul>

Note: the classes are always in the alphabetical order, i.e. a a a a b b b b b c c c ...; and never mixed e.g. a a a b b a c c b a b a a

Would it be possible using only CSS3 rules? Thank you for your answer!

You can use `:first-of-type` selector. https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type — Harun Yilmaz, Sep 18 '19 at 12:31
pseudo element can only be added inside the element and before its content not before the element — Temani Afif, Sep 18 '19 at 12:33

Riccardo De Contardi · Answer 1 · 2019-09-18T12:55:41.020

I found a solution, like this: add for each letter:

.a:before{
  content:"a";
  display:block;
  border-bottom:1px solid #000;
}
.a + .a:before{
  content:none;
}
.b:before{
  content:"b";
  display:block;
  border-bottom:1px solid #000;
}
.b + .b:before{
  content:none;
}
...

I am wondering if there is a more clever solution...

[EDIT]

Following the example by @Satif this is an alternative solution:

.ln-a:first-child:before{
  content:"A";
  display: block;
}

.ln-b:first-child, :not(.ln-b) + .ln-b:before {
  content:"B";
  display: block;
}


.ln-c:first-child, :not(.ln-c) + .ln-c:before {
  content:"C";
  display: block;
}
...

score 0 · Answer 2 · answered Sep 18 '19 at 12:45

0

But need to think about list middle dot

.a:first-child, :not(.a) + .a {
  color: red;
}

.a:first-child:before, :not(.a) + .a {
  content: 'A';
  display: block;
}


.b:first-child, :not(.b) + .b {
  color: blue;
}

.c:first-child, :not(.c) + .c {
  color: blue;
}

answered Sep 18 '19 at 12:45

demkovych

7,827
3
19
25

thank you for your answer, I added to the question a note to make my goal more clear. – Riccardo De Contardi Sep 18 '19 at 13:02

CSS3 select each first item of specified classes

2 Answers2