CODEWITHSUNDEEP
htmlcssimage
Tom Westfall
Tom Westfall

Reputation: 27

CSS No margin after every 5th image

I have a section with 2 divs with the following classes assigned to them. In the colorbook images DIV I am displaying images one after another (there's different numbers of images depending on filters being set). All the images are the same size so 5 will fit on a line and then wrap to the next line. After each image, as you can see, I have a right margin of 20px. However, I would like there NOT to be a right margin after each 5th image. The idea is to have the images fill the entire width of the DIV they are in.

Section DIV

.l-colorbook-detail {
  *zoom: 1;
  max-width: 75.5em;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

colorbook images div

.colorbook-images {
  width: 80.0%;
  float: left;
  margin-right: 0.0%;
  border:thin ;
  border-color: #CC0033 ;
  border-style:double;  
}
.l-colorbook-detail:after {
  content: "";
  display: table;
  clear: both;
}

2nd DIV for navigation

.colorbook-filters {
  width: 18.0%;
  float: right;
  margin-right: 0;
  border:thin ;
  border-color:#0033FF ;
  border-style:double;
}

And finally the CSS for the images themselves.

.colorbook-color-guide__color-option {
  width: 172px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

Upvotes: 0

Views: 189

Answers (2)

DoYouEvenCodeBro
DoYouEvenCodeBro

Reputation: 391

You can use the nth-of-type pseudo selector to do this. 

image.nth-of-type(5){
    margin-right: 0px;
}

http://www.w3schools.com/cssref/sel_nth-child.asp

This is better than using nth-child as suggested in other answers so that you could add a caption, etc without having to change it.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You could override on cascade the margin-right every 5 images through :nth-child pseudoclass

.colorbook-images img:nth-child(5n) {
  margin-right: 0;
}

or you may just set a margin-right to every image except :nth-child(5n) (chaining a :not pseudoclass)

.colorbook-images img:not:nth-child(5n) {
  margin-right: 20px;
}

Upvotes: 5

Related Questions