angularjs - Table styling with LESS -

this question styling table created inside angularjs directive. have array of objects passed directive html file. directive creates table , shows each object of array in row.

now question: there self-defined json field in each object called name. styling done less technology , want have thick separating line behind each row when 'name == david'. please consider condition can different example when 'rowid%3 ==0' , etc. general question how can access objects in less file , how can make conditional styling inside less.

i'm making lot of assumptions since didn't include code or markup, in angular basic, simple problem, , independent of whether using less, sass, or plain css:

<table>   <thead>     <tr>       <th>col 1</th>       <th>col 2</th>       <th>col 3</th>     </tr>   </thead>   <tbody>     <tr ng-repeat="item in vm.items track $index" ng-class="{'thick-separator': isnamedavid(item) || $index%3 == 0}">       <td>{{item.propone}}</td>       <td>{{item.proptwo}}</td>       <td>{{item.propthree}}</td>     </tr>   </tbody> </table> 

in controller:

$scope.isnamedavid = function(item) {   return item.name == 'david'; }; 

using ngclass directive , $index scope variable introduced ngrepeat directive, can assign thick-separator class table rows, conditionally.

now, makes no difference if using less, sass, or plain css:

.thick-seperator {   border-top: 5px solid black; } 

if, however, trying can't change angular code , need able style purely less, can style using attribute , nth-child selectors. note these available in plain css , less not needed:

table tbody tr:nth-child(3n+3), table tbody tr[data-name="david"] {   border-top: 5px solid black; }