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
Aleksi Liukkonen
source
to share
4 answers
You can do it:
#accordion2 > ul > li > ul > li:nth-child(2) {
background: ...
}
The index of the first child is 1.
If you need to support IE, the first version to support this is IE9
+6
intractve
source
to share
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;
}
violin
Look here background-image Property
+3
Alex char
source
to share
You can do it like this:
div#accordion2 ul li ul li:nth-child(2){
*style here*
}
+2
Aboca
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
Jeffrey wong
source
to share