Hacky CSS Selectors

With CSS, for years now, I thought that we could only use an element once as a selector to increase the overall specificity. e.g. .my-class to div .my-class.

However, I learnt very recently that we can repeat selectors more than once and it adds to the specificity value, as each is matched individually (it made sense when I thought about it like that!). e.g. you could do .my-class.my-class to target an element with class my-class – but with more specificity.

I used this to work around a core block in WordPress which had something like div .something .my-class.my-class with div .something .my-class.my-class.my-class!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.