How add a css id selector to a views row I need to add a css id selector to a views row. Of course this is straight forward with a class selector such as .my-class but how do I insert something like #my-class at the individual row level?

I realize that this probably invalid CSS; however, the ID appears to be needed to trigger some JavaScript.

Some background: I want to use a component from the Bourbon Refills CSS  framework for a 'fade in' effect and apply this to all the rows in a views. See http://refills.bourbon.io/components/#fade-in.

In order the make this work I need to add a CSS ID #js-fadeInElement to each row.

Note

After a bit more digging, it seems I may need a custom row.tpl file in my theme. Is this correct?
Solution 1: 

No need to add ID for each row, you can achieve it by each row CSS class it self. Instead of document.getElementById("js-fadeInElement"); you can use document.getElementsByClassName("js-fadeInElement"); 

Solution 2:


You can use Views theme templates to modify the HTML output and add your id attribute.
Under the Advanced section, you will find Theme: information.



  This link will show you possible file name for templates and a sample
  content of that file.



You probably want to copy and modify the "Style output". You can put your custom template in your own theme directory. You probably want a name like views-view-list--your-view--page.tpl.php


Please follow this link to override the template.