li::nth-child(7) span { display: inline-block; font-size: 9px; } li::nth-child(7) span::nth-child(2) { color: red; } 
 <li class="li1">1</li> <li class="li2">2</li> <li class="li3">3</li> <li class="li4">4</li> <li class="li5">5</li> <li class="li6">6</li> <li class="li7"> <input id="in1" type="text" value="+"/> <span>span1</span> <span>s2</span> <span>s3</span> </li> <li class="li8">8</li>

How should choose 2 span in 7 li. But does not work. What is the mistake here?

  • You have 16, not 7. No? - Crantisz
  • @Crantisz Thank you, correct .. - CodeGust

2 answers 2

Try this:

 li:nth-of-type(16) span:nth-of-type(2) { color: red; }
  • Thank!! happened! - CodeGust
  • Do not tell me why nth-child does not work, but is everything good with nth-of-type? PS: who put this answer minus, for what!? - CodeGust
  • @CodeGust, minus can be put for the lack of explanation why this can help. And in general, what is the difference between the above code and the fact that the question is Grundy
  • @Grundy yes, then it’s understandable. No wonder I immediately had a comment-question appeared ... - CodeGust
  • one
    @CodeGust The difference between these methods is that the first one simply “counts” the elements, and the second one considers the type, can read htmlbook.ru/css/nth-of-type - Arsen

The extra colon :: you need only one thing :nth-child(7) .

Double colon can only be used in pseudo-elements. And nth-child is a pseudo-class.

 li:nth-child(7) span { display: inline-block; font-size: 9px; } li:nth-child(7) span:nth-child(2) { color: red; } 
 <li class="li1">1</li> <li class="li2">2</li> <li class="li3">3</li> <li class="li4">4</li> <li class="li5">5</li> <li class="li6">6</li> <li class="li7"> <input id="in1" type="text" value="+"/> <span>span1</span> <span>s2</span> <span>s3</span> </li> <li class="li8">8</li>

  • why do you need only one? Why make the answer general? - Grundy
  • Yes, it works with one here. But I write on the stylus ... in my more complex version of the code, nth-child does not work for some reason ... although it should. - CodeGust
  • @Grundy A double colon can only be used in pseudo-elements. And nth-child is a pseudo-class. But he made the answer general, because it is not my answer - Crantisz
  • @Crantisz, and whose? In the next answer about the nth-of-type example without any explanation - Grundy
  • @Grundy s1mple noticed this moment - Crantisz