Lesson 1: Thinking HTML5 semantics CHAPTER 5 227
ul.level1 > li:before {
counter-increment: section;
content: "Section " counter(section) ". ";
counter-reset: subsection;
}ul.level2 > li:before {
counter-increment: subsection;
content: counter(section) "(" counter(subsection, lower-alpha) ") - ";
}ul.level1 > li, ul.level2 > li {
list-style-type: none;
}ul.level3 > li {
list-style-type: disc;
}
The following is a description of each of the style rules in this example.
■■The first style rule resets a user-defined section counter to one when the <body> ele-
ment is styled. The section counter will be set to one only after the page is loaded, but
it will be incremented in a different style rule.
■■The second style rule is executed when a <li> element that is a child of a <ul> element
with a CSS class of level1 is rendered. It increments the section counter by one. It then
inserts the content property before the <li> element, which outputs the “Section”
string, followed by the value of the section counter and then followed by the ”. “
string. Finally, the rule resets a user-defined subsection counter to one. This style rule
executes twice, before Automobiles and before Boats.
■■The third style rule is executed when a <li> element that is a child of a <ul> element
with a CSS class of level2 is rendered. It increments the subsection counter by one. It
then inserts the content property before the <li> element, which outputs the value of
the section counter, followed by the “(“ string and then followed by the value of the
subsection counter, but this value is converted to lowercase alpha representation. After
the subsection is rendered, the “) – “ string is rendered. This style rule executes five
times.
■■The fourth style rule sets the list-style-type to none for level1 and level2 list items.
■■The fifth style rule sets the list-style-rule to disc for level3 list items.
The rendered output is shown in Figure 5-11. This should give you a good idea of the
capabilities of HTML5 when working with lists.