Don’t Forget the CSS Value ‘inherit’

This post will take less than a minute to read.

Using inherit to save repetition

I’ve been using the inher­it value a lot more recently; it can eas­ily reduce the amount of repe­ti­tion in your style sheet. Here’s a basic example of what I am talk­ing about. As you can see, when chan­ging the val­ues on the .foo ele­ment, the pseudo-ele­ment also changes accord­ingly. Here is anoth­er example.

Bonus transition trick

At the moment, only Firefox sup­ports trans­itions on pseudo-ele­ments, but by mak­ing full use of inher­it, we can trick oth­er browsers into doing the same. Here is a demon­stra­tion of how this works, and here is a more prac­ticle example.

Interesting examples, espe­cially that inher­it is usu­ally an over­looked prop­erty. But… wouldn’t it be easi­er to use: .wrap­per, .wrap­per { } or am I miss­ing a point here that makes this case dif­fer­ent?

I don’t think so either, I just think it makes biggest sense to tar­get single val­ues with inher­it. Otherwise I would use the approach I presen­ted, instead of inher­it­ing all the val­ues, I would just spe­cify the prop­er­ties that would be dif­fer­ent between par­ent and chil­dren, couple of lines of code saved… But still, big up for mak­ing me think, actu­ally I find most of your posts quite rel­ev­ant and that’s much appre­ci­ated.