CSS выбор span:nth-child в выбранном li:nth-child

236

04 марта 2017, 03:51

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>

Как бы должно выбрать 2 span в 7 li. Но не работает. В чем здесь ошибка?

Answer 1

Попробуйте так :

li:nth-of-type(16) span:nth-of-type(2) {
    color: red;
}

Answer 2

Лишнее двоеточие :: нужно только одно :nth-child(7).

Двойное двоеточие может использоваться только в псевдо-элементах. А nth-child - это псевдо-класс.

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>