title: CSS paint the table row when selected in a different color, (2 colored table)
body: <pre><code>tr:first-child {background: green }
  tr {background: blue  }
  tr:nth-child(even) { background-color: red}
  </code></pre>
  
  <p>I got this, so a table with different colored rows, the even are blue and the odd are red.</p>
  
  <p>Now I have the select part:</p>
  
  <pre><code>.selected {
      background-color:black;
      color:white;
  }
  </code></pre>
  
  <p>and in my table is the problem, that once I press on the red part, nothing happens, except for the change of text color...but when I press on the blue ones, all works fine...</p>
  
  <p>Any suggestions?</p>
  
  <p>Here is my whole html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS/selected.css" /&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="appStud"&gt;
  
  &lt;div ng-controller="ctrlStud"&gt;
  
      &lt;h2&gt;Students&lt;/h2&gt;
      &lt;form&gt;
          &lt;p&gt;ID&lt;/p&gt;
          &lt;input ng-model="student.id"&gt;
          &lt;p&gt;Name&lt;/p&gt;
          &lt;input ng-model="student.firstname"&gt;
          &lt;p&gt;Last Name&lt;/p&gt;
          &lt;input ng-model="student.lastname"&gt;
  
          &lt;p&gt;From&lt;/p&gt;
          &lt;select ng-model="student.mestorodjenja.ime" ng-options="x for x in names"&gt; &lt;/select&gt; &lt;br&gt; &lt;br&gt;
  
  
          &lt;button ng-click="addStudent(student)"&gt;Add Student&lt;/button&gt;
          &lt;button ng-click="editStudent(student)"&gt;Save Student&lt;/button&gt;
          &lt;button ng-click="deleteStudent(student)"&gt;Delete Student&lt;/button&gt;
          &lt;br&gt; &lt;br&gt;
  
  
  
      &lt;/form&gt;
      &lt;button ng-click="reloadRoute()"&gt;Refresh&lt;/button&gt;
      &lt;button ng-disabled="result.length&gt;0" ng-click="initTables()"&gt;Init Tables&lt;/button&gt;
  
      &lt;table border=1 name="tableStud" arrow-selector&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
  
                  &lt;td&gt;ID&lt;/td&gt;
                  &lt;td&gt;First Name&lt;/td&gt;
                  &lt;td&gt;Last Name&lt;/td&gt;
                  &lt;td&gt;From&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr ng-repeat="student in result"
                  ng-class="{'selected':$index == selectedRow}"
                  ng-click="setSelected(student,$index)"&gt;
                  &lt;td&gt;{{ student.id }}&lt;/td&gt;
                  &lt;td&gt;{{ student.firstname }}&lt;/td&gt;
                  &lt;td&gt;{{ student.lastname }}&lt;/td&gt;
                  &lt;td&gt;{{ student.mestorodjenja.ime }}&lt;/td&gt;
  
              &lt;/tr&gt;
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;a href="http://localhost:8080/CreditCardWEB/indexNaseljenoMesto.html"&gt;NaseljenaMesta&lt;/a&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;a href="http://localhost:8080/CreditCardWEB"&gt;Back&lt;/a&gt;
  &lt;br&gt;
  
  &lt;script src="app/app.js"&gt;&lt;/script&gt;
  &lt;script src="app/controllers.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>