CODEWITHSUNDEEP
jqueryhtmlcss
user3498327
user3498327

Reputation:

Issue using nth-child

I'm new at web programming and start reading how we can use properly selector in css. I really need this because I'm developing a blog and my goal is target several paragraphs in a range the more efficient way!

To simplify the problem I made an example, li, and I need help to select the most efficient way li from [5-15] and why!. Before I post this I read this article 

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

Here is my jsfiddle

Upvotes: 4

Views: 122

Answers (5)

user1877745
user1877745

Reputation:

First if you want a range selector you need to combine something using ',' or ':' like:

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

If the first number in range are 5 you can use this (n+5) why?

| n | result(n+5)

| 0 | 5 (0+5)

| 1 | 6 (1+5)

| 2 | 7

| 3 | 8

The second part is :(-n+15), why because in last range you only need 15 above. I use simple way

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32941

Arun P Johny's answer is awesome and I'd definitely go with that. If you needed to do the same thing in jQuery due to browser support or something you could use jQuery's .slice.

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

Here is a fiddle: http://jsfiddle.net/PCL7Z/13/

Upvotes: 0

nilsole
nilsole

Reputation: 1733

If you want to use jquery, you could try this one.

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

Upvotes: 0

Brian
Brian

Reputation: 2829

Using your example:

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

Try

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

Demo: Fiddle

Upvotes: 16

Related Questions