CODEWITHSUNDEEP
csscss-selectors
Atasha
Atasha

Reputation: 499

How to target the first <a> tags in a <ul>

I have this markup:

<div>
    <ul>
        <li>
            <a>Target Me!</a>
            <ul>
                <li>
                    <a>And Not me.</a>
                </li>
            </ul>
         </li>
         <li>
            <a>Target Me!</a>
         </li>

    </ul>
</div>

Now, I was wondering if I how can I target the tags that are the direct children of the outer <ul> which doesn't includes the <a> tags that are inside the <ul> which is inside an <li> (I hope it doesn't sound confusing)

I have tried:

div ul li > a { border: 1px solid #000; }

but it still targets all the <a>s.

Can somebody help me with this please?

Upvotes: 0

Views: 2380

Answers (5)

Clyde Lobo
Clyde Lobo

Reputation: 9174

Try this http://jsbin.com/ecenan

basically the CSS should be

div > ul > li > a { border: 1px solid #000; }

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

Use the first-child pseudo-class like this

div ul > li:first-child > a:first-child

THis will only target the first li that is child to ul and then only the first child anchor element. BUt this is very convoluted you are better off using a class here.

Upvotes: 0

Tim Withers
Tim Withers

Reputation: 12059

I believe this would work:

div ul li > a:first-child { border: 1px solid #000; }

Upvotes: 0

Marc B
Marc B

Reputation: 360672

alternatively

div ul li:first-child { border: 1px solid #000; }

but this'd only work if your desired <a> truly is the first child of that <li>.

Upvotes: 0

Ana
Ana

Reputation: 37179

div > ul > li > a { border: 1px solid #000; }

would work in your case.

However, I would rather make use of a class to achieve this.

Upvotes: 2

Related Questions