CODEWITHSUNDEEP
htmlcss
Will B.
Will B.

Reputation: 21

In CSS, when I have lists within lists, I can't override the parent list style

If I have a <ul> list that has the rule "list-style-type: none" (and the rule "background-image: url(whatever.jpg)" for the <li> items), I can't seem to override those rules if I have a <ul> list as a child of one of the <li> items. I want to make the child list have the classic style "list-style-type: disc", but the browser seems to ignore that, so that I have the same background image of the parent list items used for the child list items.

Here's the HTML:

<ul class="blueArrow">    
    <li>
        <ul>
            <li>...</li>   
            ...
        </ul>
     </li>
</ul>

And the CSS:

ul.parentClass {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 1.076923076923077em;
}

ul.blueArrow li {
    padding-left: 17px;
    line-height: 22px;
    vertical-align: middle;
    position: relative;
    clear: both;
    display: block;
    height: 22px;
    background-color: white;
background: transparent url(../images/arrowblue.png) no-repeat scroll 0 3px;
    color: #086189;
    position: relative;
}

ul.blueArrow li ul {
list-style-type: disc;
background-image: none;
}

Upvotes: 2

Views: 2755

Answers (4)

Vivek Athalye
Vivek Athalye

Reputation: 2979

For the outer LI, define CSS as:

ul.blueArrow > li {
  :
  background: transparent url(../images/arrowblue.png) no-repeat scroll 0 3px;
  :
}

This will apply to only those LI which are direct children of <ul class="blueArrow">. Then you won't need to add anything like ul.blueArrow li ul

ref: http://www.w3schools.com/css/css_reference.asp

Upvotes: 1

Riley
Riley

Reputation: 148

Remember that the most descriptive selector takes precedence.

This will work:

ul.blueArrow li ul, ul.blueArrow li ul li {
list-style-type: disc;
background-image: none;
}

Here is the W3 guide on CSS Selectors: http://www.w3.org/TR/CSS2/selector.html

Upvotes: 3

user123444555621
user123444555621

Reputation: 152966

You should use

ul.blueArrow li ul {
    list-style-type: disc;
}

ul.blueArrow li li {
    background-image: none;
}

since your CSS will not overwrite the li's style.

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38503

You could do:

<ul class="blueArrow">    
    <li>
        <ul>
            <li>...</li>   
            ...
        </ul>
     </li>
</ul>

ul.blueArrow
{
    list-style-type: none;
    background-image: url(whatever.jpg);
}
ul.blueArrow li ul
{
    list-style-type: disc !important;
    background-image: none  !important;
}

Upvotes: 0

Related Questions