HTML and CSS Reference
In-Depth Information
As Figure
15-5
shows, this produces double quotes at the beginning of the
<blockquote>
, but single quotes
on the first
<q>
element. The first paragraph in the
<blockquote>
ends with a single quote because it's the
end of a
<q>
element. The double closing quote is suppressed because the
content
property of the
::after
pseudo-element is set to
no-close-quote
. But the next paragraph correctly opens and closes with double
quotes. The browser keeps track of the correct level of quotes at all times.
Figure 15-5.
The nested quotes are correctly sequenced
Generating Numbered Sequences
It's not always appropriate to use an ordered list for a numbered sequence. For example, you might want to
number the headings and paragraphs in a page that describes a company's terms of service.
Generating a numbered sequence involves the following steps:
Initialize a counter using the
counter-reset
property.
1.
Increment the counter using the
counter-increment
property.
2.
Display the counter using
::before
and the
content
property.
3.
The counter is like a variable in JavaScript. It stores the current number in the sequence. You can call it
anything you like, except the keywords
none
,
inherit
, or
initial
. It needs to be initialized in a style rule for an
element that precedes or is the parent of the first element that you want to number.
There are two functions that display the counter's value. Most of the time, you use the
counter()
function,
which keeps track of the value only in its current level of nesting. The similarly named
counters()
function
keeps track of the counter at higher levels of nesting, and resumes the correct sequence when backing out from
a lower level.
Using
counter()
is easier to understand, so I'll deal with that first.