Welcome to WebmasterWorld Guest from 54.163.68.15

Forum Moderators: not2easy

Message Too Old, No Replies

syntax confusion

   
4:26 pm on Nov 4, 2011 (gmt 0)

5+ Year Member



Can someone tell me what is the difference, if anything, between the following:

.text a:hover { [property:value] }

a:hover .text { [property:value] }


and also between:

.text p { [property:value] }

p.text { [property:value] }

p .text { [property:value] }
6:47 pm on Nov 4, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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>
8:03 pm on Nov 4, 2011 (gmt 0)

5+ Year Member



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").
8:16 pm on Nov 4, 2011 (gmt 0)

5+ Year Member



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?
8:39 pm on Nov 4, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Try a.text:hover
12:50 pm on Nov 5, 2011 (gmt 0)

5+ Year Member



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

I didn't know you could split up the a:hover.
9:54 pm on Nov 5, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
10:58 pm on Nov 5, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.