CSS merging multiple selectors

Question

Is there a way, how to group selectors in CSS? To be precise lets have table with some content like this.

<table id="my-table">
    <thead>
        <tr>
            <th><div class="my-div1"></div></th>
            <th><div class="my-div2"></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="my-div1"></div></td>
            <td><div class="my-div2"></div></td>
        </tr>
    </tbody>
</table>

And I want to merge these style

#my-table tr > th .my-div1,
#my-table tr > td .my-div1 {
    some styles
}

into something like this

#my-table tr > (th, td) .my-div1 {
    some styles
}

Does CSS support anything like this?

The immediate question is a duplicate of http://stackoverflow.com/questions/800779/why-cant-you-group-descendants-in-a-css-selector but in your specific case I don't see why you can't just use `#my-table .my-div1`. — BoltClock, Apr 03 '15 at 11:56
I can't skip the TH and TD and use only class because of previously defined styles (defined by other developer in earlier development and refactoring the styles would be to difficult and risky). I need my styles to have higher priority than the other ones (and can't use !important because of the later javascript manipulation), so I need to include the TH and TD elements too. — Andree, Apr 07 '15 at 08:45

score 1 · Answer 1 · answered Apr 03 '15 at 11:51

CSS does not support it by default. Yet there are CSS preprocessors that I'm sure can help you with this.

Just skip over specifying th or td and jump right to the class.

<table id="my-table">
<thead>
    <tr>
        <th><div class="my-div1">A</div></th>
        <th><div class="my-div2">B</div></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="my-div1">C</div></td>
        <td><div class="my-div2">D</div></td>
    </tr>
</tbody>

#my-table tr .my-div1 {
    color: red;
}

http://jsfiddle.net/gdsbLhb2/

CSS merging multiple selectors

1 Answers1