CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20001

How to change the background color of nth div

I need to change the background color of 1st, every 4th & every 5th div with class cover-inner

I tried following but it is not working

.cover-wrapper .cover-inner:nth-of-type(4n+4) {
    background-color: yellow;
}
.cover-wrapper .cover-inner:nth-of-type(4n+5) {
     background-color: orange;
}

Actual fiddle http://jsfiddle.net/gfLPG/1/

Upvotes: 2

Views: 846

Answers (3)

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

.cover-wrapper is having only one child. So there is no meaning to for giving nth child inside of .cover-wrapper with .cover-inner class.

instead of it you can use :nth-child with .cover-wrapper

.cover-wrapper{height:20px; width:200px; background-color:blue;margin:10px;}
			.cover-wrapper:first-child .cover-inner {
			    background-color: green;
			}
			.cover-wrapper:nth-of-type(4n+4) .cover-inner {
			    background-color: yellow;
			}
			.cover-wrapper:nth-of-type(4n+5) .cover-inner {
			     background-color: orange;
			}
<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>

Upvotes: 1

zessx
zessx

Reputation: 68790

Put nth-of-type() on .cover-wrapper :

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

As every .cover-inner is the only child of its parent, you will never catch'em.

Side notes:

  • Use :nth-of-type(4n) instead of :nth-of-type(4n+4)
  • Use :nth-of-type(5n) if you want to change color of every 5th elements (currently, you're changing the color of every 4th+1 element)
  • Use :nth-of-type(1) or :first-of-type() to target the first element

Upvotes: 7

Mukul Kant
Mukul Kant

Reputation: 7122

Try it :-

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

DEMO

Upvotes: 1

Related Questions