Comma separated selectors

Question

I'm having a bit of a hard time explaining what I want to do. Here's my CSS code:

div#addannouncmentdiv form button,input,textarea{
    width:50%;
}

But for some reason the inputs and the text areas even not in the div#addannouncmentdiv form still have the 50% width property. I know I can do this:

div#addannouncmentdiv form button,div#addannouncmentdiv form input,div#addannouncmentdiv form textarea{
    width: 50%;
}

But is there a shorter way than writing the div#addannouncmentdiv form every time again and again?

Answer 1

This can't be done in the current version of CSS. What you're looking for is a CSS Pre-Processor like SaSS or LESS.

SaSS / LESS

div#addannouncmentdiv form {
    button, input, textarea {
        width: 50%;
    }
}

Edit:

As @Mr.Alien says. This can be cleaned up to:

#addannouncmentdiv {
    button, input, textarea {
        width: 50%;
    }
}