newbie newbie - 25 days ago 14
CSS Question

CSS paint the table row when selected in a different color, (2 colored table)

tr:first-child {background: green }
tr {background: blue }
tr:nth-child(even) { background-color: red}


I got this, so a table with different colored rows, the even are blue and the odd are red.

Now I have the select part:

.selected {
background-color:black;
color:white;
}


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...

Any suggestions?

Here is my whole html:

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<head>
<link rel="stylesheet" type="text/css" href="CSS/selected.css" />
</head>

<body ng-app="appStud">

<div ng-controller="ctrlStud">

<h2>Students</h2>
<form>
<p>ID</p>
<input ng-model="student.id">
<p>Name</p>
<input ng-model="student.firstname">
<p>Last Name</p>
<input ng-model="student.lastname">

<p>From</p>
<select ng-model="student.mestorodjenja.ime" ng-options="x for x in names"> </select> <br> <br>


<button ng-click="addStudent(student)">Add Student</button>
<button ng-click="editStudent(student)">Save Student</button>
<button ng-click="deleteStudent(student)">Delete Student</button>
<br> <br>



</form>
<button ng-click="reloadRoute()">Refresh</button>
<button ng-disabled="result.length>0" ng-click="initTables()">Init Tables</button>

<table border=1 name="tableStud" arrow-selector>
<tbody>
<tr>

<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>From</td>
</tr>

<tr ng-repeat="student in result"
ng-class="{'selected':$index == selectedRow}"
ng-click="setSelected(student,$index)">
<td>{{ student.id }}</td>
<td>{{ student.firstname }}</td>
<td>{{ student.lastname }}</td>
<td>{{ student.mestorodjenja.ime }}</td>

</tr>

</tbody>
</table>

</div>

<br>
<br>
<a href="http://localhost:8080/CreditCardWEB/indexNaseljenoMesto.html">NaseljenaMesta</a>
<br>
<br>
<a href="http://localhost:8080/CreditCardWEB">Back</a>
<br>

<script src="app/app.js"></script>
<script src="app/controllers.js"></script>

</body>
</html>

Answer

You should refer to your class name exactly like you refer to your :nth-child selector.


Change .selected to tr.selected and its work fine, look at this example:

tr:first-child {background: green }
tr {background: blue  }
tr:nth-child(even) { background-color: red}

tr.selected {
    background-color:black;
    color:white;
}
<table>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr class="selected">
  <td>1</td>
  <td>2</td>
</tr>
</table>

Fiddle demo

Comments