homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

syntax confusion

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

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)

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)

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

One question though:

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)

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)

Try a.text:hover


 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.


 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

div.chapter p:first-letter

and so on are all perfectly legitimate.


 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved