Software Developer

nth-child CSS Selectors For 4 Column Layouts

Here’s how to select every element of either the 1st column, the 2nd column, the 3rd column, or the 4th column. This applies to 4-column galleries, or any setup of 4 columns (such as divs or paragraphs with class “one-fourth”).

/* first column */
.grid_3:nth-child(4n-3){
	padding-left: 0;
}

/* second column */
.grid_3:nth-child(4n+2){
	padding-left: 2%;
	padding-right: 2%;
}

/* 3rd column */
.grid_3:nth-child(4n+3) {
	padding-left: 2%;
	padding-right: 2%;
}

/* 4th column */

.grid_3:nth-child(4n+4){
	padding-right: 0;
}

By

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]