How to properly apply CSS style to H elements in ordered list

Question

I have this small problem, I am building a nested ordered list, and I want to be able to customize the styles of top level elements (note that bold is both on the counter and text).

1. AAA

1.1 Lorem ipsum

1.2 Lorem ipsum

1.3 Lorem ipsum

2. BBB

2.1 Lorem ipsum

2.2 Lorem ipsum

2.3 Lorem ipsum

The problem I have encountered is that if I apply any <h> tag for the top level elements of the list, the counter breaks.

Without the <h3> tags counters work properly, but without <h3> I am unable to style top level elements of the list.

How can I get both working counter and styled top level elements?

Sample here:

#test li {
  font-size: 16px;
  padding: 2px 0;
  display: block;
  margin-left: 10px
}

#test h3 {
  display: inline-block;
  padding: 0 0 5px 0;
}

#test ol, ul {
  list-style-type: decimal;
}

#test li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

#test ol {
  counter-reset: item;
  margin: 0
}

#test h3>li {
  font-size: 26px;
}

    <div id="test">
    
    <ol>
       
    <h3><li>AAAA</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
        
    <h3><li>BBBB</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
    <h3><li>CCCC</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
    </ol>
    </div>

chrisv · Answer 1 · 2016-03-02T13:45:18.793

4

You have bad formatting on your "top-level" list-elements. the < li > attribute should be outside < h3 > attribute. Check out this pen: http://codepen.io/anon/pen/jqPrWb

<body>
<div id="test">

    <ol>

      <li>
        <h3>AAAA</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>


    <li>
      <h3>BBBB</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>

  <li>  
    <h3>CCCC</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
   </li>

    </ol>
    </div>
</body>

Edit: Use CSS :before... Check out new pen http://codepen.io/anon/pen/jqPrWb

ol :before{
  font-size: 40px;
}

This will set the font-size of all numbers in < ol >... Using classes, you can set it on specific levels of your list!

edited Mar 02 '16 at 13:45

answered Mar 02 '16 at 13:35

chrisv

724
6
18

But it does not apply the style to the digit before the `
`, that's why I used `
` before `
`

Andy Andy

Mar 02 '16 at 13:37

Chek out my new pen! :) Using the :before property will probably help you out! – chrisv Mar 02 '16 at 13:45

1

I was waiting to see your next update mate because you had got part of the answer correct but have proceeded to add my own answer because I felt the other part is still not completely answered. Didn't feel comfortable modifying your answer to include my version. But a upvote from me for addressing a very key part of the problem :) – Harry Mar 02 '16 at 13:57

1

Teamwork I guess! The important thing is helping out this guy! :P – chrisv Mar 02 '16 at 13:59

J. Nilles · Answer 2 · 2016-03-02T13:58:56.950

Your heading 3's should be nested within the list item tags.

#test li {
  font-size: 16px;
  padding: 2px 0;
  display: block;
  margin-left: 10px
}

#test h3 {
  display: inline-block;
  padding: 0 0 5px 0;
}

#test ol, ul {
  list-style-type: decimal;
}

#test li li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

#test h3:before {
  content: counters(item, ".") " ";
  counter-increment: item
}


#test ol {
  counter-reset: item;
  margin: 0
}

#test li>h3 {
  font-size: 26px;
}

    <div id="test">
    
    <ol>
       
    <li><h3>AAAA</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
        
    <li><h3>BBBB</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
    <li><h3>CCCC</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
    </ol>
    </div>

Edited so that the `h3` styles are applied to `h3' elements that are children of `li` elements. — J. Nilles, Mar 02 '16 at 14:00

score 2 · Accepted Answer · answered Mar 02 '16 at 13:54

As already indicated in the other two answers, the structure is wrong (invalid) as you have put a h3 directly inside a ol and then added the li inside the h3. ol can have only li as direct children, so move the h3 to be within the li and do the following changes to your CSS.

Increment the counters at #test li instead of incrementing it as #test li:before. The reason for this is to have the counter's inheritance and scoping unaffected by the extra elements.
Add the counter's value to the #test li h3:before element (this will add the number next to the heading and apply the same styling as the h3 to the number also). Then we also need to display numbers at second level li, so add the counter display to #test li li:before also.

#test li {
  font-size: 16px;
  padding: 2px 0;
  display: block;
  margin-left: 10px
}
#test h3 {
  display: inline-block;
  padding: 0 0 5px 0;
}
#test ol, ul {
  list-style-type: decimal;
}
#test li {
  counter-increment: item
}
#test li h3:before,
#test li li:before {
  content: counters(item, ".")" ";
}
#test ol {
  counter-reset: item;
  margin: 0
}
#test li > h3 {
  font-size: 26px;
}

<div id="test">
  <ol>
    <li>
      <h3>AAAA</h3>
      <ol>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
      </ol>
    </li>
    <li>
      <h3>BBBB</h3>
      <ol>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
      </ol>
    </li>
    <li>
      <h3>CCCC</h3>
      <ol>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
      </ol>
    </li>
  </ol>
</div>

(Added as separate answer because the existing answers did not cover your question fully)

Thank you very much for explaining it in detail. It is exactly what I was looking for! — Andy Andy, Mar 02 '16 at 13:58

How to properly apply CSS style to H elements in ordered list

3 Answers3

`, that's why I used `

` before `