Howto simplify css rule with multiple class selectors for multiple elements

Question

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>

If i understand your question, why not just do .simpleTable tr, .simpleTable tr th { /*** your code ****/} — Cam
– Cam, Commented Apr 30, 2013 at 13:57
CSS4 allows you to do like this .simpleTable.cellBorders :-webkit-any(td, th) {}. jsfiddle.net/ygKj9. Mozilla also supports it. IE not. — dfsq
– dfsq, Commented Apr 30, 2013 at 14:02
@dfsq: The :-webkit-any selector will be called :matches() in CSS4. Thanks for the hint. — James
– James, Commented Apr 30, 2013 at 14:11

Simon Lehmann · Accepted Answer · 2013-04-30 14:10:40Z

6

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.)

edited Apr 30, 2013 at 14:10

answered Apr 30, 2013 at 14:01

Simon Lehmann

11k4 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hafid Denguir · Accepted Answer · 2013-04-30 14:13:08Z

-1

look this :

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

answered Apr 30, 2013 at 14:13

Hafid Denguir

9628 silver badges12 bronze badges

Collectives™ on Stack Overflow

Howto simplify css rule with multiple class selectors for multiple elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related