How to use n:th child to style views

By adam
Wed, 2014-10-01 12:55
comments

Share with Others

The Problem

Style this using views and CSS. What you are looking at below is a view being displayed as a grid. This is by far the easiest way to display content in a nice looking grid view, but as you will read there is a MUCH better way.


So you might still be thinking...this is pointless you can just use views grid display and you have it solved. I say yep to that, BUT what if you wanted your view to be responsive? Without some fancy configuration (beyond my expertise level) you cannot get views grid display to look good on a smaller screen. Bummer. There has to be a better way...and there is.

Here is my solution to this problem, using views select an unformatted list and inject the following CSS (I have also provided the SASS equivalent).


/* Styling View using :nth-child */
/* You may want to use a previous selector to grab only items within this view */
.views-row {
  float: left; /* Will bring .views-row up */
}
/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
.views-row:nth-child(4n+5) {
  clear: left;
}
/* Styling View using :nth-child USING SASS */
/* You may want to use a previous selector to grab only items within this view */
.views-row {
  float: left; /* Will bring .views-row up */
/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
&:nth-child(4n+5) {
clear:left;
}
}


You could use this as well, but it isn’t nearly as scalable and there is just a better way

/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
.views-row-5,
.views-row-9,
.views-row-13 {
  clear: left;
}

Now as you can see the grid will still look exactly the same as it did before, but it is 100% configurable with media queries and your CSS imagination. I’ll show you what I mean…

If you change the code to this

/* Styling View using :nth-child */
/* You may want to use a previous selector to grab only items within this view */
.views-row {
  float: left; /* Will bring .views-row up */
}
/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
.views-row:nth-child(3n+4) {
  clear: left;
}

You can change the grid from being 4 columns to 3 columns. This comes in handy on those smaller screens.

Note: :nth-child is supported on all “new” browsers, but our friend IE8 and below doesn't like to play ball. In my opinion, I don’t worry about this and configure and install this module to make people upgrade.

If you are new to views, you can check out our Drupal views video.