Demosthene Demosthene - 1 month ago 5
CSS Question

CSS list ID overriding default

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

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

Comments