Hacker News Reader

Comment by have_faith | Hacker News Reader

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.

View on HN

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

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.

Reply on news.ycombinator.com