There is a group of li elements with given classes. How to select a series and individual elements ( input in li ) for a particular class?

 .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>

  • Can you clarify what kind of behavior you want, and what happens? But it is so unclear what exactly you need. - Vadim Ovchinnikov
  • @VadimOvchinnikov Any behavior with this code is obtained. I am looking for a beautiful / effective way to select, for example, all elements, starting from the 3rd for all elements with a specific class. .thirdCol:nth-child(n+2) - it might work for li , but it doesn't work for the nth-child class. So I'm looking for a working analogue of this pseudocode. - CodeGust

1 answer 1

Unfortunately, what you ask is impossible by means of CSS in one beautiful selectioner.
In this particular case, you can try nth-last-child (that is, choose from the end), but not sure if it will work.
JavaScript must be used.
If it is possible to use jQuery, then the solution for selecting elements with the .thirdCol class starting from the third will look like this:

 $(".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>

The example uses a selector :gt meaning greater than, which takes the element number, after which (non-inclusive) the selector is applied; numbering starts from zero. Since we need elements starting from 3 inclusive, we pass 1.

UPD

Since there is an opportunity to change only CSS, you can try to solve it through a hack: you can use the selector so-called general sibling combinator selector (~) and you have to generate it for each element of the sequence.

 .thirdCol ~ .thirdCol ~ .thirdCol input[type='text'], /* Выбираем третий элемент .thirdCol */ .thirdCol ~ .thirdCol ~ .thirdCol ~ .thirdCol input[type='text'], /* Выбираем четвёртый элемент .thirdCol */ … и т.д. { border: 3px dotted #372; }
  • Thank! but I should only use css (Stylus). But yes, it seems that only c css will not solve the problem. - CodeGust
  • Well, see update. - Vadim Ovchinnikov