Daniel Mort Daniel Mort - 6 months ago 19
PHP Question

Targeting specific class inside table with ID using CSS - Changing ROW background

I have a table that looks like this:

<table class="table table-striped table-hover table-responsive" id="commenttable">
foreach($commresult as $row)
if($row['commentPrivate'] == 'yes'){
echo "<tr class='private'>";
echo "<tr>";
echo "<td>" . ucwords($row['commentType']) . "</td>";
echo "<td>" . ucwords($row['commentSubject']) . "</a></td>";
echo "<td>" . $row['commentMessage'] . "</td>";
echo "<td>" . ucwords($row['commentBy']) . "</td>";
echo "<td>" . ucwords($row['commentEmailComm']) . "</td>";
echo "<td>" . $row['commentDate'] . "</td>";
echo "</tr>";

What I'm trying to do is
if $row['commentPrivate'] == 'yes'
I want to change the background color of just that row to red.

I've tried just using
<tr bgcolor="#ff7f7f">
which didn't work. So now I'm just trying to add the class 'private' to the row and target it using
, which I think I'm failing at miserably.

Here's the css:

.private {
background-color: #ff7f7f;

I've also tried:

#commenttable tbody .private {
background-color: #ff7f7f;

Any help is appreciated.


.table-striped class adds zebra-stripes to a table. So to override the same, you can put !important in your CSS like this:

.private {
  background-color: #ff7f7f !important;

Here is a Demo

.table .table-striped is more specific than .private. Hence the rules for .table-striped prevails.

enter image description here

So, you can use !important to override the same. The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.