CODEWITHSUNDEEP
htmlcss
yanman1234
yanman1234

Reputation: 1019

Apply same CSS to td of two different tables

Say I have two tables, each with their own class:

<table class="table1">
    <tbody>
        <tr>
            <td>Something</td>
        </tr>
    </tbody>
</table>

<table class="table2">
    <tbody>
        <tr>
            <td>Something else</td>
        </tr>
    </tbody>
</table>

Now what I'd like to do is apply the same css to the td's of each class. I know I can achieve this through the following css:

.table1 tbody td, .table2 tbody td{...}

However, I was wondering if there exists a syntax such that I can remove the commonalities and reduce this down to something like:

(.table1, .table2) tbody td{...}

I have already tried the syntax above with braces, brackets, and parenthesis and have had no success. I feel like this should be a rather simple thing to do but can't find a solution anywhere.

Upvotes: 1

Views: 710

Answers (2)

fbid
fbid

Reputation: 1570

You can use a preprocessor like Sass if you want to use nested classes, like this:

HTML

<table class="t1"> 
  ....
</table>

<table class="t2"> 
  ....
</table>

CSS (Sass)

.t1,.t2{
  tr > td {
    color: red;
  }
}

Example here: http://codepen.io/anon/pen/RrqZpp

Upvotes: 1

grim
grim

Reputation: 6769

Provided there are other tables on your page that don't need the same styling, add a class to your tables (i.e. .some-class):

<table class="table1 some-class">
    <tbody>
        <tr>
            <td>Something</td>
        </tr>
    </tbody>
</table>

<table class="table2 some-class">
    <tbody>
        <tr>
            <td>Something else</td>
        </tr>
    </tbody>
</table>

Then just apply the css to this class:

.some-class td {
    ...
}

Upvotes: 1

Related Questions