8000 csswg-drafts/css3-values/Overview.src.html at 08d65e3e69d3b639217e64091143179f3b0b8569 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
1524 lines (1266 loc) · 56.3 KB

Overview.src.html

File metadata and controls

1524 lines (1266 loc) · 56.3 KB
heights on table columns, table column groups, table rows, table row groups,
and table cells in both auto and fixed layout tables MAY be treated as if
'auto' had been specified.</p>
<h3 id="cycle">
Cycling Values: ''cycle()''</h3>
<p>The <dfn id='cycle-value'>cycle()</dfn> expression allows descendant elements
to cycle over a list of values instead of inheriting the same value.
The syntax of the ''cycle()'' expression is:
<pre>cycle( &lt;value&gt;# )</pre>
<p>where <code>&lt;value&gt;</code> is a CSS value that is valid where
the expression is placed. If any of the values inside are not valid,
then the entire ''cycle()'' expression is invalid.
<p>The value returned by ''cycle()'' must be determined by comparing
the inherited value <var>I</var> (the computed value on the parent,
or, for the root, the initial value) to the computed values
<var>C<sub>n</sub></var> returned by the <var>n</var>-th argument to
''cycle()''.
For the earliest <var>C<sub>n</sub></var> such that
<var>C<sub>n</sub></var> = <var>I</var>, the value returned by cycle
is <var>C<sub>n+1</sub></var>. However, if this <var>C<sub>n</sub></var>
is the last value, or if there are no <var>C<sub>n</sub></var> that
equal <var>I</var>, the computed value of the first value is returned
instead.</p>
<p class='note'>Note that ''cycle()'' explicitly looks at the computed value
of the parent, so it is useful even for non-inherited properties. This
is similar to the ''inherit'' keyword, which is useful even for non-inherited
properties.</p>
<div class='example'>
<pre>
/* make em elements italic, but make them normal if they're inside
something that's italic */
em { font-style: cycle(italic, normal); }</pre>
</div>
<div class='example'>
<pre>
/* cycle between markers for nested lists, so that the top level has
disk markers, but nested lists use circle, square, box, and then
(for the 5th list deep) repeat */
ul { list-style-type: disk; }
li > ul { list-style-type: cycle(disk, circle, square, box); }</pre>
View remainder of file in raw view