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.
Increment the counter using the counter-increment property.
Display the counter using ::before and the content property.
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.
Search WWH ::

Custom Search