Don’t Forget the CSS Value ‘inherit’

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.

Tweet this

Looking for more articles? Find them here

18 Comments

  5. Matija

    These short and sweet ones are my favor­ites! Nice trick :)

  6. Pedro Duarte

    Yeah son! Good stuff.
    A lot of people for­get about the exist­ence of ‘inher­it’.

    Great examples.

    Pseudo class anim­a­tion trick you used is abso­lutely amaz­ing dude, I was lit­er­ally gobsmacked!
    Just worth to men­tion that it’s really a ‘hacky’ fix and not well sup­por­ted, etc.

    Cheers for shar­ing this man!

  8. Jakub

    Interesting examples, espe­cially that inher­it is usu­ally an over­looked prop­erty. But… would­n’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?

  11. Josh

    Right, I fol­low you now. Yes, in that par­tic­u­lar case you could just as eas­ily use the option you have presen­ted. I don’t think that inval­id­ates the use of inher­it how­ever.

  12. Jakub

    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.

  14. Vadim

    Very good point, thanks for shar­ing. Kind of a “duh” moment for me right now..

  16. Mike King

    Killer find Josh! I’ve been wrack­ing my brain for awhile now to get a solu­tion for trans­ition­ing pseudo-ele­ments. This is bril­liant!