CSS overriding bootstrap table

Question

Here're my selectors:

table.table.table-striped.vitalStatisticsTable th,
table.table.table-striped.vitalStatisticsTable td {
  line-height: 1;
  padding: .4rem; 
  background-color: red;
}

Here's my markup:

<table class="table table-striped vitalStatisticsTable">
  <tr>
    <th scope="row">Education</th>
    <td>Post Graduate</td>
  </tr>
  <tr>
  <th scope="row">Vices</th>
    <td>Drinks socially</td>
  </tr>
  <tr>
    <th scope="row">Race</th>
    <td>White</td>
  </tr>
  <tr>
    <th scope="row">Pets</th>
    <td>George the turtle</td>
  </tr>
</table>

My rules are not applied, but I'm not really sure what i'm doing wrong. I thought I had to increase specificity, and as I understand it, I am being more specific than bootstrap, but maybe i'm missing something. Can someone help a css n00b out?

this is driving me crazy.

Programmer9000
– Programmer9000

2016-03-24 02:40:22 +00:00
Commented Mar 24, 2016 at 2:40 — Programmer9000
– Programmer9000, Commented Mar 24, 2016 at 2:40

Programmer9000 · Accepted Answer · 2016-03-24 04:02:29Z

1

Well. Actually this does work. I had an extra "}" in my CSS file. I'm ashamed and relieved all at the same time.

answered Mar 24, 2016 at 4:02

Programmer9000

2,2113 gold badges19 silver badges33 bronze badges

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

Comments

Syed Nurul Islam · Accepted Answer · 2016-03-23 06:18:59Z

0

You can use this: table.vitalStatisticsTable th, table.vitalStatisticsTable td This will work. All class not need to mention in selector.

answered Mar 23, 2016 at 6:18

Syed Nurul Islam

12 bronze badges

1 Comment

Programmer9000 Over a year ago

I'm afraid that didn't work either. Thanks for the suggestion though.

Collectives™ on Stack Overflow

CSS overriding bootstrap table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related