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 inherit value a lot more recently; it can easily reduce the amount of repetition in your style sheet. Here’s a basic example of what I am talking about. As you can see, when changing the values on the .foo element, the pseudo-element also changes accordingly. Here is another example.

Bonus transition trick

At the moment, only Firefox supports transitions on pseudo-elements, but by making full use of inherit, we can trick other browsers into doing the same. Here is a demonstration of how this works, and here is a more practicle example.

Tweet this


  1. Matija

    These short and sweet ones are my favorites! Nice trick :)

  2. Pedro Duarte

    Yeah son! Good stuff.
    A lot of people forget about the existence of ‘inherit’.

    Great examples.

    Pseudo class animation trick you used is absolutely amazing dude, I was literally gobsmacked!
    Just worth to mention that it’s really a ‘hacky’ fix and not well supported, etc.

    Cheers for sharing this man!

  3. Jakub

    Interesting examples, especially that inherit is usually an overlooked property. But… wouldn’t it be easier to use: .wrapper, .wrapper { } or am I missing a point here that makes this case different?

  4. Josh

    Right, I follow you now. Yes, in that particular case you could just as easily use the option you have presented. I don’t think that invalidates the use of inherit however.

  5. Jakub

    I don’t think so either, I just think it makes biggest sense to target single values with inherit. Otherwise I would use the approach I presented, instead of inheriting all the values, I would just specify the properties that would be different between parent and children, couple of lines of code saved… But still, big up for making me think, actually I find most of your posts quite relevant and that’s much appreciated.

  6. Vadim

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

  7. Mike King

    Killer find Josh! I’ve been wracking my brain for awhile now to get a solution for transitioning pseudo-elements. This is brilliant!