1

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?

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Paul Dessert
  • 6,363
  • 8
  • 47
  • 74
  • 3
    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
  • 1
    [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

3 Answers3

4

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

#signUpForm{ 
    h1, p {
        color: #fff;
    } 
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Bobadevv
  • 366
  • 1
  • 8
3

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
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.

  • 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