Page 1 of 1
li>a
Posted: Sat Feb 24, 2007 12:00 am
by alex.barylski
I have some <a> tags within <li> tags but no classes or ID assigned, this is at a global level...
Anyways, I'd like to make all anchors none underlined so I have tried the following:
Code: Select all
li>a {
text-decoration: none
}
li#a {
text-decoration: none
}
The former seems to work in FireFox, maybe because it just assumes all hyperlinks, but is there a actual way to accomplish?
Posted: Sat Feb 24, 2007 2:13 am
by R4000
Posted: Sat Feb 24, 2007 4:24 am
by Kieran Huggins
Beware child selectors: they don't work properly in IE6.
Your first example means "all <a/> elements that are the
direct children of <li/> elements" (works, but IE chokes on the '>' selector)
Your second example means "all <li/> elements that have the
exact id a "
R4000's solution is correct, as it will match "all <a/> elements that are descendants
at any level of a <li/> element"
Be mindful of that last distinction, though I doubt it would be a problem for you very often.
Posted: Sat Feb 24, 2007 2:39 pm
by alex.barylski
Thanks for that Kieran.
So without the comma seperating tags, it works on ancestry, otherwise the same rule is applied to all tags in the series...interesting

Posted: Sat Feb 24, 2007 3:28 pm
by nickvd
Just wanted to provide examples for Kierans explanation.
Kieran Huggins wrote:Beware child selectors: they don't work properly in IE6.
Your first example means "all <a/> elements that are the
direct children of <li/> elements" (works, but IE chokes on the '>' selector)
Your second example means "all <li/> elements that have the
exact id a "
R4000's solution is correct, as it will match "all <a/> elements that are descendants
at any level of a <li/> element"
Be mindful of that last distinction, though I doubt it would be a problem for you very often.
1)
Code: Select all
<ul>
<li><a href="#">THIS ONE MATCHES</a></li>
<li><a href="#">SO DOES THIS ONE</a></li>
<li><span><a href="#">THIS ONE WONT MATCH</a></span></li> <!-- not a direct child of <li/> -->
</ul>
2)
Code: Select all
<ul>
<li id="a">THIS GETS MATCHED</li>
<li>NOT THIS ONE THOUGH</li>
</ul>
3)
Code: Select all
<ul>
<li><a href="#">THIS ONE MATCHES</a></li>
<li><a href="#">SO DOES THIS ONE</a></li>
<li><span><a href="#">THIS WILL MATCH</a></span></li>
</ul>
Posted: Sun Feb 25, 2007 12:03 am
by Kieran Huggins
Excellent

Now that you're liking CSS selectors, you're going to
love jQuery
