CODEWITHSUNDEEP
css
user1937021
user1937021

Reputation: 10771

target first occurence of element css

I'd like to target the first occurence of the <a> element in this list, first-child doesn't seem to work because it selects all the children <a> s. Any ideas?

<li class="cat-item cat-item-1 current-cat">
    <a title="View all posts filed under Basket" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=1">Basket</a>
    <ul class="children">
        <li class="cat-item cat-item-19">
            <a title="View all posts filed under Article List" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=19">Article List</a>
            <ul class="children">
                <li class="cat-item cat-item-20">
                    <a title="View all posts filed under Mobile" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=20">Mobile</a>
                    <ul class="children">
                        <li class="cat-item cat-item-21">
                            <a title="View all posts filed under Current" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=21">Current</a>
                        </li>
                    </ul>
                </li>
                <li class="cat-item cat-item-22">
                    <a title="View all posts filed under Desktop" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=22">Desktop</a>
                    <ul class="children">
                        <li class="cat-item cat-item-23">
                            <a title="View all posts filed under Current" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=23">Current</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

Upvotes: 0

Views: 95

Answers (3)

MrMarlow
MrMarlow

Reputation: 856

Not sure if you're using jQuery on your site, but if so, you can work with jquery and do this.

$("a").first().attr("title");

Etc.

As I said, it depends if you're using jQuery and it can be used for what you'd like to do, but since you didn't specify what you plan to do with the result, it's hard to assume otherwise.

Upvotes: 0

Jaime Gomez
Jaime Gomez

Reputation: 7067

If by "this list" you mean the root, you could do:

.current-cat > a

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

You would need to target the first li and then it's anchor link

ul li:first-child a {
 /* your styles here */
}

It difficult to be more specific but if you were referring to the children ul you can make it

 ul.children > li:first-child a {
     /*your styles here */
    }

If you mean this

<li class="cat-item cat-item-1 current-cat">
    <a title="View all posts filed under Basket" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=1">Basket</a>

The css would be 

li.cat-item.cat-item-1.current-cat > a {
/*styles */
}

Upvotes: 1

Related Questions