Lorem

• Ipsum
  Clever Geek Handbook

  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

  html css css3

  
  
  

  Aleksi Liukkonen Aug 29. 14 at 8:09

  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 Aug 29. '14 at 8:19

  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 Aug 29. '14 at 8:18

  source to share

  
  
  

  You can do it like this:

  div#accordion2 ul li ul li:nth-child(2){
      *style here*
  }
  
        
  
          
          
          
        
  
      

  +2

  
  
  

  Aboca Aug 29. 14 at 8:14

  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 Aug 29. '14 at 8:16

  source to share

  
  
  

  
  
  

  
  
  

  More articles:

  
  All Articles