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.

Try this #commenttable tbody tr .private { background-color: #ff7f7f; } — Senjuti Mahapatra
– Senjuti Mahapatra, Commented Jul 5, 2016 at 3:19
that does not work. I echoed the $row['commentPrivate'] result and it is indeed 'yes' — D Mort
– D Mort, Commented Jul 5, 2016 at 3:22
Have you checked the console for any errors? Or may be the CSS is getting overridden by some other CSS? — Senjuti Mahapatra
– Senjuti Mahapatra, Commented Jul 5, 2016 at 3:23
I dont see any erros in the console. The only other CSS I have is for padding on the table data, but that's about it. — D Mort
– D Mort, Commented Jul 5, 2016 at 3:27

Senjuti Mahapatra · Accepted Answer · 2016-07-05 03:44:47Z

3

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

edited Jul 5, 2016 at 3:44

answered Jul 5, 2016 at 3:34

Senjuti Mahapatra

2,6004 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D Mort Over a year ago

That worked! Thanks a lot for the explanation. On a side note, it didn't work until I removed table-responsive and table-hover classes, then it worked like a charm. Any idea why that may be?

Senjuti Mahapatra Over a year ago

It is working with these classes in the demo that I provided. So its is difficult to conclude, what could possibly create the issue.

Mamunur Rashid · Accepted Answer · 2016-07-05 07:30:33Z

3

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

answered Jul 5, 2016 at 7:30

Mamunur Rashid

7424 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related