HTML and CSS Reference
In-Depth Information
Multiple counters can be employed to allow for nesting of counter values if the
counters() function is employed. This is commonly used with outline style lists:
/* counter nesting example with counters() function showing a
value.value style outline */
ol.nest {counter-reset: counter1; list-style-type: none;}
ol.nest ol {list-style-type: none; counter-reset: counter1;}
ol.nest li:before {counter-increment: counter1;
content: counters(counter1,".") " : "; }
The values open-quote and close-quote insert quotation symbols specified by the
quotes property, or if undefined, default to the user agent's default quote style:
q {quotes: '<< ' ' >>' "( " " )";}
/* Insert quotes before and after q element content */
q:before {content: open-quote;}
q:after {content: close-quote;}
The no-open-quote and no-close-quote values do not insert quotation symbols but
do increment or decrement the nesting level for quotes.
Finally, the attr( X ) syntax returns a string value for the attribute X for the element the
rule is associated with. For example,
#p1:before {content: attr(title);}
when applied to
<p id="p1" title="Text from the title here! "> I am the paragraph </p>
would insert the title attribute's content “Text from the title here!” before the paragraph.
Though if the related element does not have an attribute named X , an empty string is used.
div.section:before {content: "Section "; font-size: xx-large;}
#div1:before {content: url(sectionstart.gif);}
#div1:after {content: url(sectionend.gif);}
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
p:before {content: counter(par-num, upper-roman) ". " }
p:before {content: attr(title); }
CSS 2, 3
IE 8+
Firefox 1.5+
Opera 9+, Safari 3+
• When using attribute matches ( attr( X ) ) for content, note that browsers may read
attributes of any name regardless of validity, but do not assume that this is the
action, because it depends greatly on the markup technology employed and how
it is supported in a browser.
Search WWH ::

Custom Search