This great tutorial explains everything except the CSS work. http://gogrow.org/tutorials/views_parity_row

I need to add CSS class to each row so I can set left/right alignment accordingly in css style. Views settings allows me to set the ccs class in Page: Style options but this one is always the same for each row. I need the class name also to alternate.

I need something like dynamically use the View Mode as css class name.

Current output: <div class="views-row"> Desired output: <div class="views-row left"> and <div class="views-row right">

Or am I missing something and the CSS work is done in a complete different way?

  • You could try using .views-row:nth-child(even) { ... } and .views-row:nth-child(odd){ ... }, see example.
    – No Sssweat
    Commented Jan 20, 2019 at 12:23

1 Answer 1


You can just set all view-rows to be left and then do like this in your css:

.views-row:nth-child(2) {
   float: right;


.views-row:nth-child(odd) {
  float: left;
 .views-row:nth-child(even) {
  float: right;

As @No Sssweat pointed out you can use nth-child odd and even to style every second element. You don’t need to style on the parent just use above code.

I actually wrote something wrong you can add nth-child on the .views-row elements

  • I was thinking of such solution too. Currently I have problem that basic theme has single parent with class "js-view-dom-id-64eb3c1702d4342adfdcc75d1bd5d7cab00b4090e16aed1e192df3ef97da623a". This is clearly a no-permanent id. I have no clue what this is for and what am I going to break if I remove it. Commented Jan 20, 2019 at 13:26
  • Try to take a look at updated answer
    – user72672
    Commented Jan 20, 2019 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.