CODEWITHSUNDEEP
htmlcsscss-selectors
James
James

Reputation: 12202

Howto simplify css rule with multiple class selectors for multiple elements

Is it possible to simplify the following css rule so that I do not have to duplicate the class selector .simpleTable.cellBorders for all elements (td and th)?

.simpleTable.cellBorders td, .simpleTable.cellBorders th {
    border: 1px #ccc solid;
}

The idea is that td and th cells have a border if the table has the classes simpleTable and cellBorders assigned like:

<table class="simpleTable cellBorders">
    <tr><th>My Header</th> ... </tr>
    <tr><td>Some cell</td> ... </tr>
</table>

Upvotes: 0

Views: 256

Answers (2)

Hafid Denguir
Hafid Denguir

Reputation: 952

look this :

.simpleTable tr > *{
    border: 1px #ccc solid;
}

Upvotes: -1

Simon Lehmann
Simon Lehmann

Reputation: 10967

You can certainly use the universal selector (*) together with the child selector (>), as there is no other valid element besides th and td that could be inside a tr:

.simpleTable.cellBorders tr>* {
    border: 1px #ccc solid;
}

Note that putting another child selector between .simpleTable.cellBordersand tr will not work as expected, as browsers (at least Firefox) will add a tbody element between the table element and its tr elements, as defined by the HTML 4.01 standard as well as the HTML5 standard:

Tag omission in text/html: A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody, thead, or tfoot element whose end tag has been omitted. (It can't be omitted if the element is empty.)

Upvotes: 6

Related Questions