1

Is there a better way to write this:

#container ul ul ul

I need to target the third nested list and every other one after that?

WebDragon
  • 876
  • 6
  • 12
j00m
  • 491
  • 5
  • 20
  • "Better" how exactly? – j08691 Feb 01 '22 at 17:10
  • You should include an example of the markup you are working with, to better clarify your question, and the answers you get, as well as possibly in image depicting the results you hope to achieve – WebDragon Feb 01 '22 at 18:24

3 Answers3

1

You can do it in several ways. If you simply want to assign a css property from the third ul element upwards (i.e.: 3 ul, 4 ul , n ul) the easiest way would be to use an asterisk *.

#container ul ul > * {
  font-style: italic
}

I have used several selectors in the following example. Which one you actually use is up to you.

#container ul ul ul {
  color: green;
}

div ul > ul > ul {
  font-size: 30px;
}

.third {
  text-decoration: underline;
}

#container ul ul > * {
  font-style: italic;
  font-weight: bold;
}

blockquote {
  color: gray;
}
<blockquote>I need to target the third nested list and every other one after that?
</blockquote>
<div id="container">
  <ul>
    <li>1 ul</li>   
    <ul>
      <li>2 ul</li>   
      <ul class="third">
        <li>3 ul</li>   
        <ul class="third">
          <li>4 ul</li>   
          <ul>5 ul</ul>            
        </ul>        
      </ul>        
    </ul>
  </ul>
  
  
</div>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • 1
    Please explain your answer. A code dump alone is never as helpful. – j08691 Feb 01 '22 at 17:37
  • @j08691 You are completely right. I wanted to do this afterwards. I had to do something else for a moment. I have updated my answer. – Maik Lowrey Feb 01 '22 at 18:13
  • 1
    Excellent maik, when we have e.g 10 ul nested and use `#container ul ul *` this applied for which ul? third? fourth or all? – Arman Ebrahimi Feb 01 '22 at 18:29
  • 1
    @ArmanEbrahimi Thank you for hint! it must be `#container ul ul > * ` and that applied css properties from the 2 upwards. I inlcuded in the working example in my answer. – Maik Lowrey Feb 01 '22 at 18:44
1

Maybe use the > selector in css or assign the element a className, but I don't think there is an easier way to do that rather than these two ways.

By using >, you will directly specify the child element (e.g. A) of the parent element (e.g.B) and won't select the appended child element of A.

Check more here: What is the difference between '>' and a space in CSS selectors?

You are trying to get the nested ul, so things like nth-of-child or nth-of-type will not work for you.

#ul>ul>ul {
  background: red
}
<ul id='ul'>
  <ul>
    <ul>
      Yes
    </ul>

  </ul>
</ul>

Confused with difference between space and > in css?

Check this as example:

#ul>ul>ul {
  background: red
}
<ul id='ul'>
  <ul>
    <ul>
      This will be considered
    </ul>
    <div>
      <ul>This will not be considered</ul>
    </div>
  </ul>
</ul>

#ul ul ul {
  background: red
}
<ul id='ul'>
  <ul>
    <ul>
      This will be considered
    </ul>
    <div>
      <ul>This will  be considered as well</ul>
    </div>
  </ul>
</ul>
James
  • 2,732
  • 2
  • 5
  • 28
  • 1
    But is it better than another? – Arman Ebrahimi Feb 01 '22 at 17:26
  • 1
    @ArmanEbrahimi, Thanks for telling me that! I have updated the answer to point out the difference between space and `>`. Although `>` looks almost the same as space in CSS, but they are a safer/better way, expecially when you want to choose a specific child element. Check more: https://stackoverflow.com/questions/2636379/what-is-the-difference-between-and-a-space-in-css-selectors – James Feb 01 '22 at 17:30
  • 1
    Thanks. this means that in `A B` styling applies on the `B` even if `B` be the second descendant of A, but in `A > B` does not applies? – Arman Ebrahimi Feb 01 '22 at 17:46
  • 1
    @ArmanEbrahimi, Nice catch :), you are right (if understand right), The `>` specifies only immediate child elements and not any descendant (including grandchildren, grand-grandchildren etc.), but space will do – James Feb 01 '22 at 20:00
  • 1
    @ArmanEbrahimi, I include two different examples as well to show you the difference and hope not confused you, but we are start to run out of topic lol:) – James Feb 01 '22 at 20:08
  • 1
    very good and excellent:) thanks for your trying:) – Arman Ebrahimi Feb 01 '22 at 20:13
0

the other answers seem to have ignored your other criterion, which was: 'and every other one after that'

this answers that question

#content ul ul ul:first-of-type,
#content ul ul ul ~ ul:nth-of-type(odd) { color: green;}
<div id="content">
  <ul>
    <li>one</li>
    <ul>
      <li>two</li>
      <ul>
        <li>three.1</li>
      </ul>
      <ul>
        <li>three.2</li>
      </ul>
      <ul>
        <li>three.3</li>
      </ul>
      <ul>
        <li>three.4</li>
      </ul>
      <ul>
        <li>three.5</li>
      </ul>
    </ul>
  </ul>
</div>

yeap it's messy-looking css (not really, IMHO, but to each their own) but if you don't have access to add classes to the markup, this is the way.

WebDragon
  • 876
  • 6
  • 12