[Prev][Next][Index][Thread]
Contextual selectors
I just want to run this by the list to make sure I properly understand
the process of selecting and ordering contextual selectors in CSS.
Heck, if I've gotten it right, then maybe this will make it clearer
for other folks.
<H1>Here is the <EM>example</EM></H1>
If I have a set of selectors, and I want to get those which match a
specific element, say EM from the example above, then I only will
select those which match the EM tag as their last selector. So:
H1 EM { rule 1 .. } will match
EM { rule 2 ... } will match
H1 { rule 3 ... } will not match
EM.funny { rule 4 ... } will not match
A selector matches if the last item in the selector matches the tag,
tag+class, class or id of the element in question.
I select the rules from the document's style, the linked style sheet,
the user's (optionally) and the agent's. I combine them in exactly that
order and then sort them on the weight from the selector. The final
set of rules would be ordered something like this:
weight n, rule from document style sheet
weight n, rule from linked
weight n, rule from user's
weight n, rule from agent's
weight n-1, rule from document
weight n-1, rule from linked
weight n-1, ....
I then construct a style object using the parent element's style object
as a starting point, inheriting the initial values for all properties
which are inherited. I then modify the style object with the list of
rules from the lookup.
One other thing I noticed is that the weight is not dependent on which
matched element is which. That is:
H1.red EM { rule.. }
has the same weight as:
H1 EM.funny { rule .. }
And there can be elements in the tree which aren't matched in the
selector, but not vice-versus. So <H1 class=red><B><EM
class=funny>element</EM></B></H1> is equivalent for the purposes of
lookup.
For the EM in <H1 class=red>some text<em class=funny>funny red</EM></H1>
Comments and correction are welcome.
Doug
--
Doug Rand drand@sgi.com
Silicon Graphics/Silicon Desktop http://reality.sgi.com/drand
Disclaimer: These are my views, SGI's views are in 3D
Follow-Ups: