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
I think:

Code: Select all

li a {
   /**
    * CSS Data
    **/
}

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)

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.

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)

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>

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