Table CSS-Style: how to create a conditional CSS class

Question

I have a table, and I need to apply different conditional styles based on a specific attribute value. Here is a snippet of the table that I want to update:

<table table-type= "source">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>

The attribute that I need to dynamically change is table-type. When a table type is 'source', for instance, I need its background color to be yellow, and if it is 'target', its background color will be red.

Both answers are correct, I just picked the one with the highest votes, and the time shows that they were answered in the same time. If I could pick more than one answer, I would definitely pick both of you. And sorry that I didn't notice your answer. — John Steve
– John Steve, Commented May 26, 2017 at 21:58
Oh thanks for checking my answer as the solution! I appreciate that. — Michael Coker
– Michael Coker, Commented May 26, 2017 at 22:11
Actually, thank you guys a lot for your help. I really appreciate that. — John Steve
– John Steve, Commented May 26, 2017 at 22:13

orabis · Accepted Answer · 2017-05-26 21:39:10Z

3

This is fairly simple in CSS, as follow

table[table-type="source"] { 
    background-color: yellow;
}

table[table-type="target"] { 
    background-color: red;
}

answered May 26, 2017 at 21:39

orabis

2,8192 gold badges15 silver badges29 bronze badges

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

Comments

Michael Coker · Accepted Answer · 2017-05-26 21:39:05Z

2

You want to use the CSS attribute selector. Here's a resource https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

table[table-type="source"] {
  background: yellow;
}

table[table-type="target"] {
  background: red;
}

<table table-type="source">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<table table-type="target">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

answered May 26, 2017 at 21:39

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Collectives™ on Stack Overflow

Table CSS-Style: how to create a conditional CSS class

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