CODEWITHSUNDEEP
jquerylisthtml-listsbackground-color
user2556079
user2556079

Reputation: 644

Set children background color list

I have a lit like this:

 <ul id="categoria"> <br>
    <li><a href="#">Categoria1</a></li>
    <li><a href="#">Categoria2</a>
        <ul class="sub-menu">
            <li><a href="#">Esercizio1</a></li>
            <li><a href="#">Esercizio2</a></li>
        </ul>
    </li>
    <li><a href="#">Categoria3</a></li>
    <li><a href="#">Categoria4</a>
        <ul class="sub-menu">
            <li><a href="#">Esercizio1</a></li>
            <li><a href="#">Esercizio2</a></li>
        </ul>
    </li>
    <li><a href="#">Categoria5</a></li>
</ul>

I want to set the background color, for example red , but just for the children of the list. So in this case Esercizio1, Esercizio2, ecc. with jquery. How is possible to do it? I only know to do for the whole list.

Upvotes: 0

Views: 1210

Answers (4)

Scott
Scott

Reputation: 21501

You can use this selector.

$("#categoria li ul li > a").css({backgroundColor: "red" });

or

$(".sub-menu li > a").css({backgroundColor: "red" });

See demo here

You can learn about jQuery selectors here.

This can also be achieved using CSS:

#categoria li ul li > a { background-color: red; }

or

.sub-menu li > a { background-color: red; }

Upvotes: 1

user2373802
user2373802

Reputation:

you can do that like this:

$('element').children().css({'background-color':'red'});

in your case:

$('ul li').children().css({'background-color':'red'});

a more detailed version:

$(".elementClassName li").children().css({'background-color':'red'});

you can specify for example only p tag children:

$(".elementClassName li").children('p').css({'background-color':'red'});

Upvotes: 1

Sergio
Sergio

Reputation: 28837

This works: Demo here

$(".sub-menu li > a").css('background-color','red');

Upvotes: 1

Pieter
Pieter

Reputation: 1833

Try this code:

$('.sub-menu li').css('background', 'red');

Upvotes: 1

Related Questions