Css className:nth-child - как сделать подобие nth-child для класса

187

26 ноября 2016, 18:36

Есть группа li элементов с заданным классам. Как выбрать ряд и отдельные элементы (input в li) для определенного класса?

.thirdCol input[type='text'] { 
  color: green; 
} 
 
.thirdCol input[type='text'] { 
  border: 1px dotted #8e1; 
} 
 
li:nth-child(7) input[type='text'] { 
  color: olive; 
  border: 1px dotted red; 
} 
 
// select 2,3,4 of 'thirdCol' class 
.thirdCol:nth-child(n+2) input[type='text'] { 
  border: 3px dotted #372; 
}

<ul> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text' value='TTT'/></li> 
  <li class='thirdCol'><input type='text' value='TTT'/></li> 
  <li class='thirdCol'><input type='text'/></li> 
  <li class='thirdCol'><input type='text'/></li> 
  <li class='thirdCol'><input type='text'/></li> 
</ul>

Answer 1

К сожалению, то что вы просите невозможно средствами CSS.
В данном конкретном случае можно попробовать nth-last-child (то есть выбрать с конца), но не уверен, что это подойдёт.
Придётся использоваться JavaScript.
Если есть возможность использовать jQuery, то тогда решение для выбора элементов с классом .thirdCol начинания с третьего будет выглядеть так:

$(".thirdCol:gt(1) input[type='text']").css("border", "3px dotted #372");

.thirdCol input[type='text'] { 
  color: green; 
} 
 
.thirdCol input[type='text'] { 
  border: 1px dotted #8e1; 
} 
 
li:nth-child(7) input[type='text'] { 
  color: olive; 
  border: 1px dotted red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text'/></li> 
  <li><input type='text' value='TTT'/></li> 
  <li class='thirdCol'><input type='text' value='TTT'/></li> 
  <li class='thirdCol'><input type='text'/></li> 
  <li class='thirdCol'><input type='text'/></li> 
  <li class='thirdCol'><input type='text'/></li> 
</ul>

В примере используется селектор :gt означающий greater than, который принимает номер элемента, после которого (невключительно) применяется селектор; нумерация начинается с нуля. Так как нам нужен элементы начиная с 3 включительно, то передаём 1.