CSS Multiple selection based on parent

Question

For the below code:

<div id="main">
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</div>

I want to select all of the 3 divs inside by class name and parent like this:

div#main div.one div.two div.three{/*apply common properties for all 3*/}

^ Doesn't work.

This is an abstract example so I need a solution similar to the one above, things like:

div#main>div{/*apply common properties for all 3*/}

Would not work in the real-case scenario.

Thank you.

Answer 1

I don't think you have any other choice than this syntax :

div#main div.one,
div#main div.two,
div#main div.three
{/*apply common properties for all 3*/}

Answer 2

I'm not entirely sure what you are looking for because the example is fairly abstract, however, you could try to give each of the child divs a second class after their numbering and selecting by that. This assumes you have control over the server-side/html generation. For example:

<div id="main>
    <div class="one other-style"></div>
    <div class="two other-style"></div>
    <div class="three other-style"></div>
</div>

div#main div.other-style {
    font-family: 'Comic Sans MS';
}

Except don't actually use Comic Sans.

This answer may be a bit simplistic, but without knowing a bit more that's all I could think of!