Is there a way to shorten css selectors?

Question

I have:

#signUpForm h1, #signUpForm p{
    color: #fff;
}

Is there a way to shorten this such as:

#signUpForm h1, p{
    color: #fff;
}

Or do I need to create a new comma separated selector each time, as in my first example?

Maybe just `#signUpForm { color: #fff; }` will fit to what you need ? — singe3, Jul 31 '14 at 07:04
I agree with Singe on that. You're changing only the text color, and the child container will inherit the parent container's color. — Luka, Jul 31 '14 at 07:06
Yes, in the simplified example above, it would, but in my real project I need to target individual elements. — Paul Dessert, Jul 31 '14 at 07:06
Well I don't think you can do a shorter selector than your first one — singe3, Jul 31 '14 at 07:07
I'm afraid there's no other way to simplify your selector any further but to assign identifiers or classes to the HTML elements themselves. — Luka, Jul 31 '14 at 07:07
Ok, not a big deal. Just thought I'd ask because I was curious. Thanks. — Paul Dessert, Jul 31 '14 at 07:08
Yes you could add for example the class="colorForm" and define it to #fff in CSS but the problem is deported to the HTML which is not too good — singe3, Jul 31 '14 at 07:09
[You will be able to do](http://www.w3.org/TR/selectors4/#matches) `#signUpForm :matches(h1, p)` one day, but not yet. — Alohci, Jul 31 '14 at 07:13

score 4 · Answer 1 · edited Jul 31 '14 at 07:12

4

Have you thought of using Sass, you could do something like

#signUpForm{ 
    h1, p {
        color: #fff;
    } 
}

edited Jul 31 '14 at 07:12

Mr. Alien

147,524
33
287
271

answered Jul 31 '14 at 07:11

Bobadevv

366
1
8

Mr. Alien · Accepted Answer · 2014-07-31T07:14:55.533

It depends on the properties you are specifying and the elements you want to target, if its jut about color then you can write

#signUpForm {
    color: #fff;
}

Because color property will be inherited by h1 as well as p but think of a scenario where you want to apply font-weight so here you cannot use the above selector as font-weight won't be inherited by h1 tag.

If you want, you can use CSS pre processors like LESS or SASS where you can write like

#signUpForm {
    h1, p {
       font-weight: 100;
    }
}

But again, as I said, it depends on the properties you are writing, because some are inherited by the child elements and some are not, so even if you use color like

#signUpForm {
    h1, p {
       color: #fff;
    }
}

Makes no sense because that is equivalent to #signUpForm { color: #fff; } unless you've specified a different color for h1 or p

Yeah LESS and SASS might be my next thing to check out. thanks — Paul Dessert, Jul 31 '14 at 07:15

score 1 · Answer 3 · 2014-07-31T10:39:27.503

1

Use :any.

#signUpForm :any(h1,p) { }

Browser support varies. You may need to do -webkit-any etc.

See https://developer.mozilla.org/en-US/docs/Web/CSS/:any. See also the proposal for the similar :matches CSS4 pseudo-class at http://dev.w3.org/csswg/selectors4/#matches.

edited Jul 31 '14 at 10:39

answered Jul 31 '14 at 07:15

Good idea, but you're right about browser support. Thanks! – Paul Dessert Jul 31 '14 at 07:16
note that using pseudo also affects the specificity of your selectors – Mr. Alien Jul 31 '14 at 07:18
Using `:any()` is pointless due to the prefixes - see http://stackoverflow.com/questions/10753174/css3-combining-selectors-with-or-instead-of-and/10753216#10753216 Also, it's a pseudo-class, not a pseudo-element. – BoltClock Jul 31 '14 at 10:13
@Mr. Alien: It shouldn't - the specificity of `:matches()` is whatever selector matches the element. The pseudo-class is not counted, similar to `:not()`. – BoltClock Jul 31 '14 at 10:18
http://the-echoplex.net/csscrush/ supports `:any`. You could use it until the browser support is better, without drinking all the LESS/SASS Kool-aid. – Jul 31 '14 at 11:36

Is there a way to shorten css selectors?

3 Answers3

Linked