li>a

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

li>a

Post 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?
User avatar
R4000
Forum Contributor
Posts: 168
Joined: Wed Mar 08, 2006 12:50 pm
Location: Cambridge, United Kingdom

Post by R4000 »

I think:

Code: Select all

li a {
   /**
    * CSS Data
    **/
}
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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)

Code: Select all

li>a { text-decoration: none; }
Your second example means "all <li/> elements that have the exact id a "

Code: Select all

li#a { text-decoration: none; }
R4000's solution is correct, as it will match "all <a/> elements that are descendants at any level of a <li/> element"

Code: Select all

li a { text-decoration: none; }
Be mindful of that last distinction, though I doubt it would be a problem for you very often.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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)

Code: Select all

li>a { text-decoration: none; }
Your second example means "all <li/> elements that have the exact id a "

Code: Select all

li#a { text-decoration: none; }
R4000's solution is correct, as it will match "all <a/> elements that are descendants at any level of a <li/> element"

Code: Select all

li a { text-decoration: none; }
Be mindful of that last distinction, though I doubt it would be a problem for you very often.

1)

Code: Select all

li>a { text-decoration: none; }

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

li#a { text-decoration: none; }

Code: Select all

<ul>
<li id="a">THIS GETS MATCHED</li>
<li>NOT THIS ONE THOUGH</li>
</ul>
3)

Code: Select all

li a { text-decoration: none; }

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>
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Excellent :-) Now that you're liking CSS selectors, you're going to love jQuery ;-)
Post Reply