CODEWITHSUNDEEP
htmlcssoverwrite
DNac
DNac

Reputation: 2783

CSS class overwrites other

I have HTML tables where the following CSS is applied:

.tbst th,
td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 12px;
    overflow: hidden !important;
    line-height: 24px !important;
}

and

.cmstb th,
td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 14px;
    overflow: hidden !important;
    line-height: 24px !important;
}

One table is using .tbst class, the other one .cmstb. But from some reason, the second CSS is applied to both tables, so the second CSS overwrite the style in first CSS. What am I doing wrong here?

Upvotes: 3

Views: 94

Answers (3)

Zebradon
Zebradon

Reputation: 1

td class is being overidden. Also they are both using all the same values except for font-size. you should condense it using less. and then you would only apply the difference to the second table.

.tbst th, .tbst td {
padding: 12px 3px !important;
text-align: center !important;
vertical-align: middle !important;
border: 1px solid #ccc !important;
font-size: 12px;
overflow: hidden !important;
line-height: 24px !important; }

and

.cmstb th, .cmstb td { 
font-size: 14px; }

Upvotes: 0

smets.kevin
smets.kevin

Reputation: 1618

You are targeting td twice, the last defined properties will always override those previously defined.

Even nicer (and more performant) CSS would be the following:

.cmstb-th,
.cmstb-td,
.tbst-th,
.tbst-td {
  padding: 12px 3px !important;
  text-align: center !important;
  vertical-align: middle !important;
  border: 1px solid #ccc !important;
}

.tbst-th,
.tbst-td {
  font-size: 12px;
}

.cmstb-th,
.cmstb-td {
  font-size: 14px;
}

Why the overuse of !important by the way? Mostly this means you have (another) inheritance issue.

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

you are styling the th correctly, but for td, the style is oerwritten, because it is not specific to any table. make it specific to those tables

.tbst th,
 .tbst td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 12px;
    overflow: hidden !important;
    line-height: 24px !important;
}
and

.cmstb th,
.cmstb td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 14px;
    overflow: hidden !important;
    line-height: 24px !important;
}

Upvotes: 3

Related Questions