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; }
See more: :nth-child, columns
Questions and Comments are Welcome