I am working on an Application that generates output with li tags. I am trying to find a way to apply different list-style-image for each li tag of the same level within the ul, while keeping the HTML code as simple as possible. Each li with a class of green, yellow, or error should have its own unique image instead of the default bullet point.
I have learned that in CSS, "list-style-image" needs to be applied to the style of the ul, but it doesn't seem to work when applied to the li directly.
<body>
<div>
<ul>
<li class="green">Lorem ipsum dolor sit amet.</li>
<li class="yellow">Lorem ipsum dolor sit amet.</li>
<li class="error">Lorem ipsum dolor sit amet.</li>
<ul>
<li class="error">Lorem ipsum dolor sit amet.</li>
<ul>
<li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
</ul>
</ul>
<li class="yellow">Lorem ipsum dolor sit amet.</li>
<li class="green">Lorem ipsum dolor sit amet.</li>
<li class="green">Lorem ipsum dolor sit amet.</li>
<li class="error">Lorem ipsum dolor sit amet.</li>
<ul>
<li class="error">Lorem ipsum dolor sit amet.</li>
<ul>
<li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
<li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
<li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
</ul>
</ul>
</ul>
</div>
Css
.error {
color: white;
font-weight: bold;
background: #FF6666;
list-style-type: none;
border-left: 15px solid #E82C0C;
margin-bottom: 1px;
padding: 5px;
}
.green {
background: #CCFFCC;
list-style-type: none;
border-left: 15px solid #7FFF7F;
margin-bottom: 1px;
padding: 5px;
}
.yellow {
background: #FFFF66;
list-style-type: none;
border-left: 15px solid #FFDE59;
margin-bottom: 1px;
padding: 5px;
}
div {
padding: 10px 10px;
margin-bottom: 20px;
min-width: 768px;
max-width: 1024px;
overflow: hidden;
}