Hacker News Reader

Comment by soperj | Hacker News Reader

You should probably use specificity first, then important, just in case you need to over-ride it in the future.

Being more specific often ends up more tightly coupling your selector to the structure of the DOM. .className { property: value !important; } is more resilient to DOM changes than adding extra selectors to increase specificity.

having an id on the top <html> tag and mentioning it in css rules seemed very effective to me- especially when the tag was the name of the page, which is what i wanted to override by anyway

I personally like the body:not(#fakeid) trick :-)

You know what I hate about CSS? Having to learn a bunch of "tricks."

So much so that a business with those keywords recently sold for eight figures!

I haven't found that to be the case.

I’ve noticed many CSS authors don’t seem to know that you can just repeat a selector to increase its specificity. For your example, `.className.className` increases the specificity without adding more reliance on DOM structure.

I did not know this, thanks for the tip

Wow, I've been doing CSS for a very long time, and had no idea about repeating the selector to increase specificity. That'll come in very handy, thank you!

This is a really cool tip.

EDIT: Memory was playing tricks on me

no you can't

You are right, should have confirmed that before posting. Old warped memory from ye olden days.

Very cool tip. Do you know if that's an implementation artifact or part of the spec?

It is part of the spec, and is explicitly noted to avoid confusion starting in Selectors Level 3[0]:

> Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.

[0] https://www.w3.org/TR/selectors-3/#specificity

Thanks!

you can also override id selectors with :is

*:is(#a#b, .someclass) {...}

overrides any selector with a single id; you add more ids to override more specific selectors (except inline stiles and !important)

Mind blown. How the hell did I not know this.

But that only works if you only need to increase "class-level" specificity. If you're trying to overwrite a style set with IDs, you're gonna need to either use IDs yourself or use !important. Sometimes you may not want to use IDs.

Right—you can do the same thing with ID selectors, they just always have a higher specificity because they are in bucket A[0], whereas virtually all the other selectors are in bucket B.

If you really have to select that element by ID for some reason, you can use an attribute selector instead—`[id=foo]`—and then it’s also in bucket B and can be controlled in the normal way.

Basically, you should consider ID selectors (and element selectors) an antipattern and never use them.

[0] https://www.w3.org/TR/selectors-4/#specificity-rules

This, if you understand the CSS rules for specificity, you almost never need to use !important.

On the other hand, using ever-increasing specificity to emulate !important is about as elegant and semantic as using the hypothetical properties !importanter, !importanterer and !importantererer

Ever-increasing specificity is how CSS works, to call that "emulating !important" is misleading. I'm suggesting using CSS as intended, the cascading part of cascading style sheets, instead of relying on a troublesome override.

Edit: Take this example:

    div {font-size: 60% !important;}

If I can't control the order the CSS is loaded, and I can't change that line directly, how do I modify it? Like this:

    html div {font-size: 70% !important;}

The use of !important isn't some simple way of bypassing ever-increasing specificity. In many cases it just makes things more complex.

Reply on news.ycombinator.com