1

I would like to apply styling to list items in ordered list (specifically to the ::after or ::before), based on the classes of the <li>. The code for these lists looks like the following:

<ol>
    <li class="class1">Item 1</li>
    <li class="class1">Item 2</li>
    <li class="class1">Item 3</li>
    <li class="class2">Item 4</li>
    <li class="class2">Item 5</li>
</ol>

The lists are generated automatically, and the position of the first class2 item may vary inside the list (it can even be absent in some case, leaving only class1 items in the list).

I would like to add something in the ::before of the first item of each class (like a specific header for each type of item in my list). Ending up with something like this: Example of expected result

Anyone could help me with the CSS selector to use for this? I tried several things with + or ~ but nothing works seems for now... Thanks!

David

41 72 6c
  • 1,600
  • 5
  • 19
  • 30
David
  • 23
  • 2
  • 1
    A better approach would be for you to use counters for different classes wrapping them with the type of brackets you want - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters – nimsrules Jun 19 '19 at 07:34
  • I think that is not a job for CSS to begin with, that structure, including the headers, should be set in HTML in the first place. You have two separate lists of items with different meanings here, so mark them up according to that. – 04FS Jun 19 '19 at 07:46
  • @04FS I agree this would be better, but I have other constraints that force me to have one single list for the time being, and I thought I could do something with CSS selectors to format my list items the way I wanted... – David Jun 19 '19 at 07:53
  • Can you show, in your question, what you want that ‘input’ html to become? The image you link to has no reference to your html, which makes it more difficult than necessary to see what you want. – David Thomas Jun 19 '19 at 08:00
  • How is the list generated? By backend code or JavaScript? That's where you could and in my opinion should put the logic behind making such thing possible. You know the logic already and it is not difficult to come up with [a solution](https://jsfiddle.net/pvwjst07/) in order to make a check for a first iteration for something. It is good practice and easy to do this inside the logic where you will be generating the list rather than letting CSS and/or even HTML deal with this all. – Barrosy Jun 19 '19 at 08:02
  • @Barrosy again, I totally agree, but changing the result of my transformation (XSLT transformation from DITA content, using built-in OxygenXML editor templates) would involve MUCH more complicated customization, and I really do not have the competences for that... As a first approach I wanted to try a "simple" hack using CSS which I am - a little - more used to! – David Jun 19 '19 at 08:47
  • CSS can only do so much and you might even end up over complicating something because you are not willing to step over difficulties and get out of the way to learn something new (coding and programming). In the end it is up to you what solution you would wish to go by. – Barrosy Jun 19 '19 at 08:51

2 Answers2

0

You can use a section tag to define a header for your list.

<section>
<h3>Reference Document</h3>
<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ol>

Tandiiss
  • 1
  • This is not what OP was asking for. Besides, `
    `'s [purpose](https://www.w3schools.com/tags/tag_section.asp) is for something (defining document sections) else rather than assigning headings to a list.
     – Barrosy Jun 19 '19 at 08:09
0

There is no :first-of-class selector available, but you can use the general sibling combinator to remove the pseudo element for all elements with the same class, that are following the first one:

.class1::before { content:"some header for class 1"; display:block; }
.class2::before { content:"some header for class 2"; display:block; }
.class1 ~ .class1::before, .class2 ~ .class2::before { content: none; }
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
04FS
  • 5,660
  • 2
  • 10
  • 21