CODEWITHSUNDEEP
csscss-selectorspseudo-class
wlknsn
wlknsn

Reputation: 101

Descendant of first child

I'm trying to adress the descendant/child of the first child in a list. For example:

<ul>
<li> 
<a>This "a" of the first list item should have a black background</a>
</li>
<li> 
<a></a>
</li>
<li> 
<a></a>
</li>
</ul>

Using first child like "ul li:first-child" will only affect the li but not the a descendant. I'm trying to format the child(s) of the first child.

Perhaps even "ul + li a" or something, but apparently that isn't woking either.

Upvotes: 1

Views: 693

Answers (4)

Tom Haws
Tom Haws

Reputation: 1342

You specifically said:

/* a list's */
ul

/* first child's  */
> li:first-child

/* descendant or child */
*

or

ul > li:first-child *

Strangely, none of the other answers give you exactly what you requested, though I agree about the * global selector being non-optimal. If you can specify, it might be nice.

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77976

ul li:first-child a {
    background-color:black;
}

http://jsfiddle.net/UbuAx/

Upvotes: 3

Phrogz
Phrogz

Reputation: 303254

All anchors under the first list item:

ul li:first-child a { … }

Or for any descendants:

ul li:first-child * { … }

Or for only children (not grand children, etc. descendants):

ul li:first-child > * { … }

Upvotes: 0

Interrobang
Interrobang

Reputation: 17434

I believe you want:

ul li:first-child > * {

This will match all direct children of the first <li>.

If they're always links, you could subsitute the * for a.

Upvotes: 0

Related Questions