syntax confusion

Hi sssweb,

selectoracle [gallery.theopalgroup.com] is a useful tool for interpreting selectors, and Section 5 Selectors [w3.org] of the recommendations has more detail.

Read them right to left, in this case:
.text a:hover { [property:value] }
= Selects an <a> when it is hovered, that is contained in an element with the class "text"
eg <p class="text">lorum ipsitor <a href="#">Link</a> </p> (when the <a> is hovered)
a:hover .text { [property:value] }
= Selects an element with the class name "text" that is contained in an <a> that is hovered
eg <a href="#">My <span class="text">link</span.</a> (When hovered)

.text p { [property:value] }
= A <p> contained in an element with the class name "text"
eg <div class="text"> <p>Lorum ipsitor</p></div>
p.text { [property:value] }
= A <p> with the class name "text"
eg <p class="text"> Lorum</p>
p .text { [property:value] }
= An element with the class name "text" that is contained in a p
eg <p>LLurum ipsitor <a class="text" href="#">link</a></p>

Thanks -- that clarifies it; and thanks for the links too.

One question though:

Can

a:hover .text

also be used like:

<a class="text" href="page.htm">link</a>

so that the whole link takes on .text properties when hovered? I tried

a:hover.text

(as in the p.text example), but the CSS checker says it's invalid code ("unrecognized pseudo-element").

I checked the SelectORacle and it says it acts the same as the p.text

However, the instructions say that SelectOracle "won't choke on any actual rules" -- what does that mean, the code might still be invalid?

Try a.text:hover

Yes! That's what I was looking for. Thanks, Fotiman.

I didn't know you could split up the a:hover.

Anything beginning in : is a "pseudo-class". The colon goes with what follows; it doesn't have to be glued to anything in particular on the left. For example with :first-letter

p:first-letter
p.special:first-letter
div.chapter p:first-letter

and so on are all perfectly legitimate.

Hi sssweb, as Lucy has said, this isn't a case of "splitting" a:hover because that isn't a single selector, but two combined:
a = element
:hover = pseudo-class that applies on hover

One way of thinking about this is that it makes sense to write the hard-coded element and class a.text (which don't change) before specifying the dynamic pseudo-class :hover (which does).

However keep in mind efficiency: Your selector requires the browser to evaluate every <a> to check if it is also classed .text. Unless you have lots of different link styles, more efficient to just use a:hover.

Note modern browsers accept :hover on elements other than <a>. More detail and the full range of pseudo-classes (and pseudo-elements) in the link to the recommendations given above. Also note css3 pseudo-elements use double colon syntax - so Lucy's example of :first-letter will become ::first-letter - but it will be sometime before that syntax is fully understood.

In terms of the SelectORacle instructions, I read that by reference to the first part of the sentence:

Best of all, the SelectORacle will flag potential errors and other problems, and it won't choke on any actual rules. (My emph)

.. while the tool flags errors, it can interpret complex selectors - so convoluted selectors won't be (falsely) reported as an error. But my thoughts only. As we recommend the tool so often I've emailed to ask.

Edit to answer question better Best I can tell SelectORacle definitely stops/reports syntax errors such as misplaced punctuation and out-of-order pseudo's. It will explain selectors such as red:hover, although red isn't a valid HTML element - but it might be in xml - recall this tool is for explaining the selector - not checking HTML validity.