Problem using nth-child

I am new to web programming and am starting to read how we can use the selector in css correctly. I really need this because I am developing a blog and my goal is targeting several paragraphs in a range in a more efficient way!

To simplify the task, I gave an example li, and I need help to choose the most effective way lifrom [5-15] and why !. Before publishing this, I read the article

<ol>
 <li>item one</li>
 <li>item two</li>
 <li>item three</li>
 <li>item four</li>
(...)
<ol>

Here is my jsfiddle

+4
source share
5 answers

Try

li:nth-child(n+5):nth-child(-n+15) {
    color: red;
}

Demo: Fiddle

+16
source

Using an example :

li, li:nth-child(n+15)~li {
    /* Your normal li style */
}
li:nth-child(n+5) { 
    /* The 5-15 style */ 
}
+1

jquery, .

var my_selection = [];
for(var i=4;i<=14;i++){
my_selection.push($('ol li').get(i));
}
0

- , . jQuery - -, jQuery .slice.

$('li').slice(4, 15).css('color', 'red');

: http://jsfiddle.net/PCL7Z/13/

0

, , -, "," ":", :

li:nth-child(), li:nth-last-child() or li:nth-child():nth-child() 

5, (n + 5), ?

| n | ( + 5)

| 0 | 5 (0 + 5)

| 1 | 6 (1 + 5)

| 2 | 7

| 3 | 8

: (- n + 15), , 15 .

0

Source: https://habr.com/ru/post/1535039/


All Articles