CODEWITHSUNDEEP
htmlcsscss-selectors
Sudharsan S
Sudharsan S

Reputation: 15393

Simplest way to apply CSS background color to nth child 3 to 10

I want to apply CSS background color to nth child 3 to 10

    <div class="roundperiodbg" id="roundPeriod1" title="PERIOD 1"></div>
    <div class="roundperiodbg" id="roundPeriod2" title="PERIOD 1"></div>

    <div class="roundperiodbg" id="roundPeriod3" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod4" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod5" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod6" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod7" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod8" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod9" title="PERIOD 2"></div>
    <div class="roundperiodbg" id="roundPeriod10" title="PERIOD 2"></div>

    <div class="roundperiodbg" id="roundPeriod11" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod12" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod13" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod14" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod15" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod16" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod17" title="PERIOD 3"></div>
    <div class="roundperiodbg" id="roundPeriod18" title="PERIOD 3"></div>

This works but is there any simpler way in CSS?

.roundperiodbg:nth-child(3), .roundperiodbg:nth-child(4), ..... .roundperiodbg:nth-child(10) {
        background : green;

}

Upvotes: 4

Views: 943

Answers (5)

Anik
Anik

Reputation: 471

You can use the following code - 

$('.roundperiodbg:gt(2):lt(10)').css('background','green');

In this :gt(n) specifies that any element after nth element will be selected, and lt(n) specifies any element before nth element will be selected

Upvotes: -1

Łukasz Trzewik
Łukasz Trzewik

Reputation: 1165

Why don't you just create a new class like:

.roundperiodbg-green {
   background: green;
}

and apply it to all your divs that need this styling?

Upvotes: 0

kuldeep singh
kuldeep singh

Reputation: 7

Try This

    .roundperiodbg{ background:#333; height:10px; width:100%; margin:5px;}
    .roundperiodbg:nth-child(n + 4){ background:green;}

Upvotes: 0

omma2289
omma2289

Reputation: 54629

You can use two :nth-child() selectors to create a range like this:

.roundperiodbg:nth-child(n+3):nth-child(-n+10){
     background : green;
}

See this demo fiddle.

Explanation:

:nth-child(n+3) selects all elements with an index equal or great than 3

------
n | i
------
0 | 3
------
1 | 4
------
2 | 5
------
3 | 6
------
..| ..

:nth-child(-n+10) selects all elements with an index equal or lower than 10

------
n | i
------
0 | 10
------
1 | 9
------
2 | 8
------
3 | 7
------
..| 1

When you apply both in the same CSS rule the element would have to match both conditions therefore it only applies to elements with index between 3 and 10.

Also you can check out this link for more cool uses of the :nth-child() selector. Thanks @Rajaprabhu

Upvotes: 14

mhdrad
mhdrad

Reputation: 330

Create a container an put all your items in the container. and use below css code:

.container>div:nth-child(n+3){
  background : green;
}

Look at this fiddle

Upvotes: 0

Related Questions