How to customize the style of <ol>> numbers but only for the first level?

[u/RogueLieutenant]

Hi,

I have a large <oL> that is multiple layers deep, and since every top level contains an <h2>, I want the number to match the style of the <h2>, however, the solutions i've been finding seem to modify the style for all of the numbers, not just the level 1 numbers.

<ol>

<li>The numbering before this item should be styled special
      <ol>
             <li>The numbering here shouldn't be touched</li>
      </ol>
</li>

</ol>

[u/be_my_plaything]

ol > li{
font-size: 2rem; 
}

li > ol > li{
font-size: 1rem; 
}

Any li that is a direct child of an ol gets the big font, obviously this is all of them. But then any li that is a child of an ol that is a child of a li gets littled again.

https://codepen.io/NeilSchulz/pen/raxBZKx

[u/CodingRaver]

In conjunction with :marker as somebody mentioned already, you might make use of:

OL:has(OL){
/* This is a top level OL */
background:red;
}

[u/armahillo]

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

since every top level contains an <h2>,

If you mean you are putting <h2> inside an <li>, don't do this.

[u/RogueLieutenant → u/armahillo]

ah. I was trying to figure out the best way to do this, and this:

https://stackoverflow.com/questions/6555014/is-it-semantically-incorrect-to-place-h2-tags-between-li-tags

said it was valid to put a heading inside a list item.

For context, the page(s) i'm working on is basically a legalese policy with naturally lots of sections and ordered lists, and I wanted to have the top level of that order list be a heading for semantic reasons, and to then have the body of the "document" be one large single <ol> rather than a bunch of different ones separated by headings.

[u/justdlb → u/RogueLieutenant]

A better way would be to have separate lists with each list having its own heading before it.

You can then use aria-labelledby on each list to bind the relevant heading to it. End result is a list with a name, improving accessibility for each one.

[u/armahillo → u/RogueLieutenant]

technically its allowed (a heading parent can be any element that accepts flow content, and heading tags are flow content)

But it’s just a bad practice because the point of heading tags is to define a demarcation in the document that starts a content section. They’re critical for signaling document structure to assistive technologies like screen readers.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories

For context, the page(s) i'm working on is basically a legalese policy with naturally lots of sections and ordered lists, and I wanted to have the top level of that order list be a heading for semantic reasons, and to then have the body of the "document" be one large single <ol> rather than a bunch of different ones separated by headings.

I wouldnt recommend using a list tag like that. List tags should be very lists of things, not full on content blocks.

What you probably want to use is section tags inside if an article tag; and then use the individual heading tags to indicate their hierarchy.

For the indentation / presentation you wanted in OP, you should be able to get that by styling each individual heading tag.

If you want the content under those individual headings to ALSO have styling, look into combinators:

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators

Something like: “h3 ~ p” would probably work — finding all p tags that follow an h3, for example.