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

Question

I have a table that looks like this:

<table class="table table-striped table-hover table-responsive" id="commenttable">
    <thead>
        <th>Status</th>
        <th>Subject</th>
        <th>Message</th>
        <th>Tech</th>
        <th>Emailed?</th>
        <th>Date/Time</th>
    </thead>
    <tbody>
        <?php
            foreach($commresult as $row)
            {
                if($row['commentPrivate'] == 'yes'){
                    echo "<tr class='private'>";
                }
                else{
                    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>";
            }
        ?>
    </tbody>

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

Answer 1

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

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.

Answer 2

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