CODEWITHSUNDEEP
htmlcsshtml-lists
Sebas
Sebas

Reputation: 21542

applying a list-style-image to the given ul only, not to subjacent ul's

I have a <ul id="islist"> with the according css:

#islist {
    list-style-image: url('../img/img.png');
}

#islist * li {
    list-style-type: none;
}

Then, within this , there's another one: 

<ul id="islist">
    <li>title</li>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</ul>

The problem is that all <li> elements have the image setup, not only the title. How can I solve this?

Upvotes: 1

Views: 394

Answers (2)

Musa
Musa

Reputation: 97707

Your html is invalid you cant have a ul as a child of a ul, place the ul in an li and then the styles will be applied to the nested lis.

<ul id="islist">
    <li>title</li>
    <li><ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
    </li>
</ul>

also I think you want to use list-style: none; instead of list-style-type:none;

DEMO

Upvotes: 2

KaeruCT
KaeruCT

Reputation: 1645

The problem is that the style is applied to the ul, not to the li. Change the CSS as follows:

#islist {
    list-style-image: url('../img/img.png');
}

#islist ul {
    list-style-type: none;
}

Upvotes: 1

Related Questions