How can i apply css for div inside table?

Question

I want to apply CSS on $100 that is a div element inside a table. It should be red in color, but my CSS selector does not work.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    table { 
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border-color: gray;
    }
    
    .new > div{
    color:red;
    }
    
    </style>
    </head>
    <body>
    
    <table class="new">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>
        <div>$100</div>
        </td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
    
    </body>
    </html>

Read about [+, ~ and > symbols in CSS](https://techbrij.com/css-selector-adjacent-child-sibling) — Ismail Vittal, Jun 20 '19 at 04:54

score 3 · Accepted Answer · answered Jun 20 '19 at 04:38

3

You can do something like this:

table.new td div{
color:red;
}

It will change the css of Div inside a td tag.

answered Jun 20 '19 at 04:38

Shiv Shankar

1,007
2
8
13

score 1 · Answer 2 · answered Jun 20 '19 at 04:40

1

.new div{
  color:red;
}

simple change or add class to div

answered Jun 20 '19 at 04:40

Jeon

97
1
7

score 0 · Answer 3 · answered Jun 20 '19 at 04:40

First option is to use table tr td div (select div, that is inside a td, inside tr, inside table in that order).

Second option would be to use a class. This way you can reuse the same style on whatever element you need to by just adding the same class.

The reason why .new > div you used does not work is that > selector is used for selecting direct child element only. Since div is not directly inside the table element it will not be selected.

table tr td div {
  color:red;
}

.red-text {
  color:red;
}

<!DOCTYPE html>
<html>
<head>
<style>
table { 
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

.new > div{
color:red;
}

</style>
</head>
<body>

<table class="new">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>
    <div>$100</div>
    </td>
  </tr>
  <tr>
    <td>February</td>
    <td class="red-text">$80</td>
  </tr>
</table>

</body>
</html>

Vintage Coders · Answer 4 · 2019-06-20T05:07:18.417

You can do it by following ways:

1) Using Inline CSS

<div style="color:red;">$100</div>

2) Using Internal CSS.

In this method, we will first assign a class to the div which contains $100. Then we will give CSS to the class in <style> tag.

<style>
.red
{
color:red;
}
</style>


<div class="red">$100</div>

Following is the code using 2nd method:

<!DOCTYPE html>
    <html>
    <head>
    <style>

table { 
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border-color: gray;
    }
    
    .new > div{
    color:red;
    }
    .red
    {
    color:red;
    }
    
  </style>
    </head>
    <body>
    
    <table class="new">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>
        <div class="red">$100</div>
        </td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
    
    </body>
    </html>

How can i apply css for div inside table?

4 Answers4