alt131
msg:4383617 | 6:47 pm on Nov 4, 2011 (gmt 0) |
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>
|
sssweb
msg:4383643 | 8:03 pm on Nov 4, 2011 (gmt 0) |
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").
|
sssweb
msg:4383647 | 8:16 pm on Nov 4, 2011 (gmt 0) |
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?
|
Fotiman
msg:4383651 | 8:39 pm on Nov 4, 2011 (gmt 0) |
Try a.text:hover
|
sssweb
msg:4383801 | 12:50 pm on Nov 5, 2011 (gmt 0) |
Yes! That's what I was looking for. Thanks, Fotiman.
I didn't know you could split up the a:hover.
|
lucy24
msg:4383905 | 9:54 pm on Nov 5, 2011 (gmt 0) |
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.
|
alt131
msg:4383924 | 10:58 pm on Nov 5, 2011 (gmt 0) |
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.
|
|
