Is there a short form for this css selector

  • A+

I've stumbled across this many times before and I've been wondering if one could write this in a simpler and less redundant way.

Let's assume we have this HTML:

<div class="wrapperClass">     <div class="someClass">         <h1>This is a title</h1>     </div> </div> 

If I want to style the <h1> element I'd proceed like that:

.wrapperClass .someClass h1 {      color: red; } 

Let's assume there is also a possibility that the user uses a <h2>, <h3>, <h4>, <h5> or even a <h6> and we need to cover these cases as well.

My CSS statement would now look like this:

.wrapperClass .someClass h1, .wrapperclass .someClass h2, .wrapperClass .someClass h3 ... 

This statement is really long; that's why I'm wondering whether there is a short form for these sort of cases or not.


(Currently) there is no any heading selector but an alternative with certain restrictions is this:

.wrapperClass .someClass > * 

It will match any element that is a direct child of .someClass.


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: