CODEWITHSUNDEEP
htmlcss
user966582
user966582

Reputation: 3313

CSS select an element in this markup

I have following markup, which I cannot change. I want to apply a specific css only to the which is located at the end of the div, but not to the any which is inside some other div. Is it possible to select it?

<div class="box">
    <div class="another">
        <ul>
            <li>not</li>
            <li>this</li>
        </ul>
    </div>
    <ul>
        <li>select</li>
        <li>this</li>
    </ul>
</div>

I have tried, .box ul:last-child but it doesn't work.

http://jsfiddle.net/7e53A/

Upvotes: 0

Views: 70

Answers (3)

Niklas
Niklas

Reputation: 13135

Try this DEMO

.box > ul{
    border: 1px solid red;
}

What this means is sort of: Select an ul within .box but not any other grand children.

@Koushik's comment: If you have more than one ul in your .box then you could add :last-child to your css:

.box > ul:last-child{
    border: 1px solid red;
}

Upvotes: 3

kamesh
kamesh

Reputation: 2424

sample code to find last node using jquery jquery code and css code

$(document).ready(function(){

$( ".box  ul" ).last().css( "color", "red" );

});

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114980

You were very close. You just have to use the direct child selector >.

Useful Article: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

.box > ul:last-child{
    border: 1px solid red;
}

JSFiddle Demo

Upvotes: 1

Related Questions