CODEWITHSUNDEEP
csscss-selectors
Artem Svirskyi
Artem Svirskyi

Reputation: 7839

Simplify css selectors with the same parent

.content p, .content ul, .content h1 {
       text-indent: 35px;
}

Are there any shortcuts for this selector, like .content p, ul, h1 {}?

                                                                                                 

Upvotes: 2

Views: 127

Answers (2)

Pavlo
Pavlo

Reputation: 44889

There is a :matches() functional pseudo-class in Selectors Level 4 (aka CSS 4):

.content :matches(p, ul, h1) {
  text-indent: 25px;
}

However, it isn't supported by any browser yet. But there are :-webkit-any() and :-moz-any() that bring the same functionality to Chrome and Firefox respectively.

Upvotes: 3

bikeshedder
bikeshedder

Reputation: 7487

With normal CSS you do not have a choice.

With CSS compilers like SASS or LESS you can write something like that:

.content {
    .p, ul, h1 {
        text-indent: 35px;
    }
}

I nowadays highly recommend using Compass which makes writing CSS so much more fun.

Upvotes: 6

Related Questions