CSS - Basic specificity

Question

I have an HTML table with numerous columns. I want to set text-align: center on all columns except one.

I've heard that both using !important and unnecessary nesting is frowned upon. What is the "best" way to achieve this?

Using !important:

#my-table td {
    padding: 5px;
    text-align: center;
}

.my-table-special-td {
    text-align: left !important;
}

Unnecessary nesting:

#my-table td {
    padding: 5px;
    text-align: center;
}

#my-table .my-table-special-td {
    text-align: left;
}

Or some other method?

By "best" I mean: * Conformance to CSS best practices * Good performance

@user3117610 maybe you can get here some idea's http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i — STP38, Feb 24 '14 at 09:57
You shouldn't use `!important` indeed, at least not "by design", you should use it only to fix something when the change required would be too big without using it. The "class" solution seems a good one (and is no "unnecessary nesting") but if you know for sure the index of the column you could also use `nth-child`. — Laurent S., Feb 24 '14 at 09:57
Yes I can add classes. By unnecessary nesting I mean that the "my-table" specifier before "my-table-special-td" is redundant. — user3117610, Feb 24 '14 at 09:59
there is no need, to worry about redundancy in a css file, you better take care that your code stays readable, which is not that easy with nested elements) — CodeFanatic, Feb 24 '14 at 10:14
Redundancy = larger file size. Both Google and FF warn that nesting selectors is harmful for performance. I'm just trying to get in the right mindset regarding such problems before doing throw-away work. — user3117610, Feb 24 '14 at 10:30

Ismatjon · Answer 1 · 2019-01-22T03:40:43.333

1

Do not use !important, unless you do not have any other choice.

#my-table td {
    padding: 5px;
    text-align: center;
}

td#my-table-special-td {
    text-align: left;
}

you do not have to do any nesting. just use id istead of class and add tag name in front of it as you can see in the above code.

here is an example of it jsFiddle

edited Jan 22 '19 at 03:40

answered Feb 24 '14 at 10:10

Ismatjon

1,149
1
8
17

I don't think this works. ".my-table-special-td" is less specific than the "#my-table td" rule, so it remains centered. – user3117610 Feb 24 '14 at 10:17

score 1 · Answer 2 · answered Feb 24 '14 at 10:15

For performance wise, use inline styling for all your css. This is the technique used in google mail (Gmail) and I think Yahoo! mail as well. So if it's speed you want. Use inline style for everything. Honestly I wouldn't go that route because it does not offer clean and re-usable code.

So I would go with the cleanest solution which is giving the element a class name and avoid using !important. It is definitely frowned upon and it does not have to be used to be honest. The table will respect your class name on your table element. This offers a more clean CSS in the end that works on all browsers. If you are overriding classes in General, it means you might want to rethink the architecture of your CSS. I do not mean you are doing it the wrong way, but we are talking about the best way of doing things aren't we? :)

Happy coding!

score 0 · Answer 3 · answered Feb 24 '14 at 09:57

Personally, I use !important for "overriding" classes. Things like:

.center {text-align:center !important}
.right {text-align:right !important}

And so on - if I specify class="right" on an element, it's because I specifically want it right-aligned and !important helps reflect that.

However in more general cases, you should avoid !important - mostly because once you've used !important, there's no way to override it any more!

score 0 · Answer 4 · answered Feb 24 '14 at 10:02

0

You should do it like this:

.tableAll td{
padding: 5px;
text-align: center;
}

and you just want to center only so why define class. Inline style will work in this case and will override matching style of .tableAll.

<table class="tableAll">
 <tr>
    <td style="text-align: center;"></td>
    <td >other all</td>
 </tr>
</table>

I don't recommentd using !important.

answered Feb 24 '14 at 10:02

Ashwani

3,463
1
24
31

I don't like the idea of mixing inline CSS, I think that's a nono of best practices. – user3117610 Feb 24 '14 at 10:17
@user3117610 Inline styles are good if you it is not going too long and mess with tags. If it is `.class` is best practice. In your case there is one and you are not writing it everywhere. – Ashwani Feb 24 '14 at 10:33

CodeFanatic · Answer 5 · 2014-02-24T10:09:47.180

Actually, both solutions are fine using !important and nesting,

You should not use !important too often, because once it spreads and you use it over and over again, you will be back at the beginning (difficulty in specifying elements specific to override other styles, applied), but in that particular case you are fine since the !important rule only affects 1 element.

Nesting also works good, as long as you use it for special cases and not for every single element, because once you do so, your code will be unreadable and you will have a very hard time in improving and re factoring.

score 0 · Answer 6 · answered Feb 24 '14 at 10:11

#my-table td {
    padding: 5px;
    text-align: center;
}

#my-table td.my-special-td {
    text-align:left;
}

Arguably you don't need the #my-table selector as you stated you wanted to all td elements to be aligned to the center.

A more reuseable approach would be to remove the id and just have:

td { text-align:center; }
td.left-align { text-align:left;}
td.right-align {text-align:right;}

Then you can apply the alignment to any td anywhere, as well as override if you need to by adding an id to the table later on.

Since there's more than 1 table on my site, I do need the #my-table specifier. However, since none of the other tables have a my-table-special-td, specifying "#my-table" in conjunction with that seems redundant. — user3117610, Feb 24 '14 at 10:20

score 0 · Answer 7 · answered Feb 24 '14 at 10:24

I won't recommend to use !important . In your case using text-align: center you can center the text and if you want for any column text should be left-align you could make a particular class for that column or better use some advance level CSS3.

In this example I want to change the Last Column of Last row and want to apply class.

I can do this by adding this style.

table tr:last-child td:nth-child(5) {background:red;}

Or better check this example. http://jsbin.com/mizotofe/1/

CSS - Basic specificity

7 Answers7