CODEWITHSUNDEEP
csscss-selectors
Andree
Andree

Reputation: 1199

CSS merging multiple selectors

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?

Upvotes: 0

Views: 70

Answers (1)

Chris Bier
Chris Bier

Reputation: 14437

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/

Upvotes: 1

Related Questions