CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NateH06
NateH06

Reputation: 3574

Why is my more specific CSS style not overriding Bootstrap?

I can't get my CSS style to override Bootstrap's default's for the alignment of my table headers. Here's my table:

<table class="userProjectsTable" id="userLeadProjectsTable">

    <tr class="userProjectsHeaderRow" id="userLeadTableHeaderRow">
        <th>Project Title</th>
        <th>Created Date</th>
        <th>Currently Active</th>
        <th>Go to Project Workspace</th>
    </tr>
    <tr> ...rest of rows... </tr>
</table>

And here's a bit of the CSS I'm using to format it:

.userProjectsTable {
    text-align: center;
    width: 95%;
    border-radius: 7px;
}

#userLeadTableHeaderRow {
    background-color: rgba(6, 47, 55, .9);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    border: 3px solid white;
    border-radius: 7px;
    height: 20px;
}

But when I inspect the source, it says it is taking the text alignment from Bootstrap's table.less CSS sheet. And the offending styleization comes from here:

th {
 text-align: left;
}

How is it that an element selector, with a score of 1, is overriding both a class and an ID selector?

Upvotes: 0

Views: 93

Answers (2)

Dan Kreiger
Dan Kreiger

Reputation: 5516

You aren't targeting the th element in your css.

If you want to override bootstrap, target the th element like so:

#userLeadTableHeaderRow th {
  text-align: center;
}

Upvotes: 2

rootkill
rootkill

Reputation: 629

Bootstrap is setting the Text Align property of the th element; and you are overriding the CSS of the Table and tr elements.

You need to override the styling of the th or td elements for the properties to work.

Upvotes: 2

Related Questions