I've seen the following code in a CSS file:
.baseline a:hover {
// code
// code
}
Is this allowed?
I can guess what is does.
I thought the correct format was something like:
a.myStyleName:hover {
// code
// code
}
Any help (for this beginner) would be appreciated.
Thanks.
JamThe double-slash is not a valid comment in CSS. The /* multi-line comments */ denotation should be used. Aside from that, it depends on the positioning of the elements. The first code would apply for the following HTML:
<div class="baseline">
<p>Hi! <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" title="Go to a page.">Page</a>.</p>
</div>
All links inside any block-level element with a class name of "baseline" will have the effect. However, in the second code you posted, it would only apply to links with that specific class. Take the following HTML, for example:
<div>
<p>Hi! <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" title="Go to page." class="myStyleName">Page</a>.</p>
</div>
The first code is just a shortcut to avoid having to add the same class name to a set of links inside a common element.Originally posted by Jona
All links inside any block-level element with a class name of "baseline" will have the effect.Why specifically a block level element? What if the link was (for some reason) inside a <span class="baseline"> tag?
The code you posted:
.baseline a:hover
There are two parts to that they are separated by a space, the first part references any elements with the class "baseline" and the second part references any links that are in the hover state. Because of the way the code is written though, only hover links inside an element with class="baseline" will be referenced.
If the code were like this:
.baseline, a:hover
Then it would match elements with class="baseline" AND hover links.
For more information on selectors, take a look at this handy table (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors">http://www.w3.org/TR/2001/CR-css3-selec ... #selectors</a><!-- m -->) on the W3C site.You're right, Lavalamp, I didn't think about SPANs; I was thinking block-level only, because usually inline elements either can't or aren't allowed to hold other inline elements. (INPUT, IMG, other A's, etc.)You might find SelectORacle (<!-- m --><a class="postlink" href="http://gallery.theopalgroup.com/selectoracle/">http://gallery.theopalgroup.com/selectoracle/</a><!-- m -->) helps a bit with confusing selectors. It spits out a human readable (allegedly
) explanation of the supplied selector(s).
.baseline a:hover {
// code
// code
}
Is this allowed?
I can guess what is does.
I thought the correct format was something like:
a.myStyleName:hover {
// code
// code
}
Any help (for this beginner) would be appreciated.
Thanks.
JamThe double-slash is not a valid comment in CSS. The /* multi-line comments */ denotation should be used. Aside from that, it depends on the positioning of the elements. The first code would apply for the following HTML:
<div class="baseline">
<p>Hi! <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" title="Go to a page.">Page</a>.</p>
</div>
All links inside any block-level element with a class name of "baseline" will have the effect. However, in the second code you posted, it would only apply to links with that specific class. Take the following HTML, for example:
<div>
<p>Hi! <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" title="Go to page." class="myStyleName">Page</a>.</p>
</div>
The first code is just a shortcut to avoid having to add the same class name to a set of links inside a common element.Originally posted by Jona
All links inside any block-level element with a class name of "baseline" will have the effect.Why specifically a block level element? What if the link was (for some reason) inside a <span class="baseline"> tag?
The code you posted:
.baseline a:hover
There are two parts to that they are separated by a space, the first part references any elements with the class "baseline" and the second part references any links that are in the hover state. Because of the way the code is written though, only hover links inside an element with class="baseline" will be referenced.
If the code were like this:
.baseline, a:hover
Then it would match elements with class="baseline" AND hover links.
For more information on selectors, take a look at this handy table (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors">http://www.w3.org/TR/2001/CR-css3-selec ... #selectors</a><!-- m -->) on the W3C site.You're right, Lavalamp, I didn't think about SPANs; I was thinking block-level only, because usually inline elements either can't or aren't allowed to hold other inline elements. (INPUT, IMG, other A's, etc.)You might find SelectORacle (<!-- m --><a class="postlink" href="http://gallery.theopalgroup.com/selectoracle/">http://gallery.theopalgroup.com/selectoracle/</a><!-- m -->) helps a bit with confusing selectors. It spits out a human readable (allegedly
) explanation of the supplied selector(s).