CODEWITHSUNDEEP
htmlcsscss-selectorscss-tables
Robbit
Robbit

Reputation: 1577

How to deselect a table's head and certain tds with css

I want to create a html table of which I want to select only the cells that do not belong to the thead and do not have a certain class. I got stuck with the not operating selector like this

table :not(thead):not(.cell-class) {
    background-color: #FFFFFF;
}

+----------------+---------------+----------+----------+
|                |               |          |          |    <-- <thead>
+----------------+---------------+----------+----------+
|  .cell-class   |       x       |     x    |     x    |
+----------------+---------------+----------+----------+
|  .cell-class   |       x       |     x    |     x    |
+----------------+---------------+----------+----------+
|  .cell-class   |  .cell-class  |     x    |     x    |
+----------------+---------------+----------+----------+

Only the x marked cells are supposed to be selected. Does anyone know how to address it properly?

Upvotes: 0

Views: 123

Answers (2)

Sebastian H&#246;ffner
Sebastian H&#246;ffner

Reputation: 1944

Try it with this

tbody td:not(.cell-class) {
    background: #ffffff; 
}

It should even work if you don't have an additional tbody-element enclosing your trs after the thead. (At least it does in chrome tested with this fiddle.)

Upvotes: 0

Marcel
Marcel

Reputation: 683

The following selector syntax should do what you're looking for:

thead, td:not(.cell-class){

}

Upvotes: 2

Related Questions