Don’t Forget the CSS Value ‘inherit’

Don't Forget the CSS Value inherit

I’ve been using the inherit 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-element also changes accord­ingly. Here is another example.

Bonus trans­ition trick

At the moment, only Firefox sup­ports trans­itions on pseudo-elements, but by mak­ing full use of inherit, we can trick other 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

Comments

  1. Matija

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

  2. Pedro Duarte

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

    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!

  3. Jakub

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

  4. 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 inherit however.

  5. Jakub

    I don’t think so either, I just think it makes biggest sense to tar­get single val­ues with inherit. 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 appreciated.

  6. Vadim

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

  7. 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-elements. This is brilliant!