Comment simplifier la règle css avec plusieurs sélecteurs de classes pour plusieurs éléments

Question

Est-il possible de simplifier la règle css suivante pour ne pas avoir à dupliquer le sélecteur de classes .simpleTable.cellBorders pour tous les éléments (td et th)?

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

L'idée est que td et les cellules e ont une frontière si la table a des classes simpleTable et cellBorders affectés comme:

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

Answer 1

Vous pouvez certainement utiliser le sélecteur universel (*) ainsi que le sélecteur d'enfant (>), car il n'y a pas d'autre élément valide en plus th et td qui pourraient être à l'intérieur d'un tr:

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

Notez que mettre un autre sélecteur d'enfant entre .simpleTable.cellBorders et tr ne fonctionnera pas comme prévu, que les navigateurs (au moins Firefox) ajoutera un élément tbody entre l'élément table et ses éléments tr, tels que définis par le HTML 4.01 standard ainsi que la HTML5 standard:

omission de tag dans text/html: une balise de début de l'élément tbody peut être omis si la première chose dans l'élément tbody est un élément tr, et si l'élément n'est pas immédiatement précédée d'une tbody, thead, ou l'élément tfoot dont l'étiquette de fin a été omise. (Il ne peut pas être omis si l'élément est vide.)

Answer 2

regard ceci:

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