I have a site that runs on CMS and I need to style the content headings (probably H2 and H3) with unique ol li style. I need this style to be applied only to the headings not the other ol li inside the content. I’ve this code but I’m having trouble making it only to be assigned to the headings. its kind of applying the style to any ol that exist withing the content with a css class given.
<div class="g1-content-narrow">
<ol>
<li><h3> lorem ipsum </h3></li>
<p> and the text of the h3 goes here....probably with more paragraphs </p>
<ol>
<li> sub topics of h3 above</li>
<li> another sub topics of h3 above</li>
<li>and another sub topics of h3 above</li>
</ol>
<li> <h3> lorem ipsum another heading </h3></li>
<p> and the text of the h3 goes here....probably with more paragraphs </p>
<ol>
<li> sub topics of h3 above</li>
<li> another sub topics of h3 above</li>
<li>and another sub topics of h3 above</li>
</ol>
</ol>
</div>
So i need the H3 ol li ONLY to have the above CSS style.
Thank you.
This .g1-content-narrow ol li:before does not target the h3 inside the li, so I don’t think you need to worry about that one. Although I may be corrected by one of the CSS gurus. But the .g1-content-narrow ol li:hover should be .g1-content-narrow ol li:hover h3. Again the h3 comes after li, because it is nested inside the li.
Try just changing the two and see if you get the results you are looking for.
That is invalid HTML, run that example through the validator and you will find the following errors.
Element p not allowed as child of element ol in this context. /h3></li>↩<p> and t
Element ol not allowed as child of element ol in this context. aphs </p>↩<ol>↩<li>
I’m not a fan nesting heading tags within list items. The heading is not part of the list of items, it should introduce the list of items.
You can retain the H3 association to the OL by nesting them in a <section> element. Then you can use counters to number your H3 headings.
If your using H3 headings make sure you have an H2 that is introducing them.
Something like this will be valid html and you will find that it will be easier to style the H3 as you are wanting to do.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings for Ordered List Items</title>
<style>
.g1-content-narrow {
counter-reset: section;
}
.g1-content-narrow h3 {
background: #eee;
margin: 0 0 1em;
}
.g1-content-narrow h3::before {
counter-increment: section;
content: counter(section)".";
padding-right: .3em;
}
</style>
</head>
<body>
<h1>Level 1 Heading</h1>
<div class="g1-content-narrow">
<h2>Level 2 Heading</h2>
<section>
<h3>Level 3 Heading</h3>
<p>and the text of the h3 goes here....probably with more paragraphs</p>
<ol>
<li>sub topics of h3 above</li>
<li>another sub topics of h3 above</li>
<li>and another sub topics of h3 above</li>
</ol>
</section>
<section>
<h3>Level 3 Heading</h3>
<p>and the text of the h3 goes here....probably with more paragraphs</p>
<ol>
<li>sub topics of h3 above</li>
<li>another sub topics of h3 above</li>
<li>and another sub topics of h3 above</li>
</ol>
</section>
</div>
</body>
</html>
The code above will produce the following document outline when run through the validator.
The html and the semantics are a bit too muddled up to give a clear answer to what the correct semantics and structure should be.
It is the content that should dictate which html elements are the right ones, then the spec will dictate how to validly structure them.
Don’t choose elements based on their default appearance.
This could well be a nested list, or it could be a sectioned article, or an article containing lists.
But as we only have dummy content to go on, we can only guess at the context of the page.
Only once you have valid, semantic html will you go to work with css and make it look the way you want.
