Can I select this <li> Without adding classes using a CSS selector?
<div id="accordion2">
<ul>
<li>
<h3>Lorem</h3>
<ul>
<li><a href="#">Ipsum</a></li>
**<li><a href="#">SELECT THIS <li> WITH CSS WITHOUT ADDING CLASS TO IT</a>**
<ul>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
</li>
<li><a href="#">Ipsum</a></li>
</ul>
</li>
Hi i want to add a background image to my li that has a lower li level, the question is, can i select it using a css selector? I dont want to use classes, but if I have no other solution. Thanks to
+3
source to share
4 answers
You can use the property background-image
:
#accordion2 > ul > li > ul > li:nth-child(2){
background-image: url('http://img3.wikia.nocookie.net/__cb20120506145055/disneyjessieseries/images/1/1d/20px-Facebook-icon.png');
background-repeat: no-repeat;
list-style-type: none;
text-indent: 20px;
}
Look here background-image Property
+3
source to share
#accordion2 ul li ul li {
background-color: grey;
}
I don't like nesting so deep that it will confuse you and scare you off xD! In this case, create a class that has a property with a different background color or image, and add that class to specific elements that you want to tag.
CSS
.red-li {
background-color: red;
}
Html
<ul>
<li class="red-li">Im Red</li>
</ul>
+2
source to share