CSS list ID overriding default

Question

In my

main.css

file, I have defined a style for a specific list ID (

expList

):

#listContainer{

  margin-top:15px;

}

#expList ul, li {

    list-style: none;

    margin:0;

    padding:0;

    cursor: pointer;

}

#expList p {

    margin:0;

    display:block;

}

#expList p:hover {

    background-color:#121212;

}

#expList li {

    line-height:140%;

    text-indent:0px;

    background-position: 1px 8px;

    padding-left: 20px;

    background-repeat: no-repeat;

}

#expList .collapsed {

    background-image: url(../images/collapsed.png);

}

#expList .expanded {

background-image: url(../images/expanded.png);

}

This works fine and I can then call my expandable/collapsible list with custom bullets (

.png

) as follows:

<div id="listContainer">

  <ul id="expList">

    <li>First item

      <ul>

        <li>Item hidden in the collapsed list

etc.

Although I thought

#expList ul, li

would only affect list items with this custom ID, it seems it's overidden the default style, and in particular the

list-style: none

property prevents me from using default numbered/bullet lists.

How can I fix this?

Answer 1

Although I thought #expList ul, li would only affect list items with this custom ID,

Considering

#expList ul, li

note you have a , followed by li, this means that all li tags irrespective of which id or class (in this case) will be not styled in your codes..So the behaviour is as expected

try

#expList li{
 list-style-type:none 
}

The above will only apply no style type to list tags found in the ul tag with id #expList

CSS list ID overriding default

Sign up