CODEWITHSUNDEEP
htmlcss
Hoa
Hoa

Reputation: 20438

How can I override CSS?

In the following example

http://jsfiddle.net/xBRPg/

I'm trying to create a yellow background for one of my table rows. The following line of code

<table class="table table-bordered table-striped">

Seems to supersede my own styling. If I remove the classes the row appears yellow as desired. Is there some way to maintain the classes yet override the setting so that my colour takes top priority?

Upvotes: 0

Views: 574

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

The problem is caused by the rule that set alternating background colors for rows using selectors with high specificity. To suitably override them, use e.g.

    tr.zebraHover,
    .table-striped tbody tr:nth-child(2n+1).zebraHover td
    {
        background-color: #FFFACD;
    }

Upvotes: 0

Rick Hoving
Rick Hoving

Reputation: 3575

Change the class to an id.

CSS:

#zebraHover td{
            background-color: #FFFACD;
        }

HTML

<tr id="zebraHover">
     <td>1</td>
     <td>User1</td>
     <td>[email protected]</td>
     <td><a class="btn btn-danger" href="#">Deactivate</a></td>
 </tr>

http://jsfiddle.net/xBRPg/

Upvotes: 0

Simon
Simon

Reputation: 3717

This occurs because of CSS specificity - table.table-striped tr is more specific than table tr. More specific rules override less specific ones. In my opinion you should avoid !important as long as possible, and instead focus on making your selectors more specific. So in your case, make that:

table.table-striped tr.zebraHover td {
    background-color: #FFFACD;
}

Upvotes: 1

Rick Hoving
Rick Hoving

Reputation: 3575

Change this in your css

tr.zebraHover td {
            background-color: #FFFACD !important;
}

And yes I know it is very dirty. If someone knows this better, comment on my answer. I'd rely like to know a better solution!

Upvotes: 0

Quentin
Quentin

Reputation: 943097

The row is yellow. It is just that the cells inside it are #f9f9f9 so you can't see the row's background colour through them.

You need to change your selector to match the cells in the row, and not the row itself. You will also need to increase the specificity of the selector as the ones being used already are more specific then you have.

Upvotes: 4

Related Questions