CODEWITHSUNDEEP
htmlcss
vs777
vs777

Reputation: 644

Table row is not picking up class

I have a simple HTML code where I draw a table and assign different classes to the Alternative rows :

<div id="content">
 ....
<table>
 <tr class="a1"> ... </tr>
 <tr class="a2"> ... </tr>
</table>
 ....
</div>

In my CSS I have the following definitions

#content {
    float: right;
    width: 98%;
    padding-top: 15px;

}

#content tr.a1 {
    background-color: #F1F1F1;
}

#content tr.a2 {
    background-color: #F2FFFF;
}

When my HTML page loads background color remains white.

However if I update my CSS by removing "#content" :

tr.a1 {
    background-color: #F1F1F1;
}

tr.a2 {
    background-color: #F2FFFF;
}

everything works correctly. It seems like link to "content" property is not working. How can I fix it? thank you in advance.

Upvotes: 1

Views: 2555

Answers (2)

ikiK
ikiK

Reputation: 6532

If you write #content tr.a1 it means tr is right after #content which is obviously not, you have table in between.

I STAND CORRECTED

I have been honestly coding for 10 years wrong...

.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1

You can write that like this to work: #content * tr.a1

or #content table tr.a1

Please learn how to use CSS Selectors

Examples:

#content {
  float: right;
  width: 98%;
  padding-top: 15px;
}

#content table tr.a1 {
  background-color: red;
}

#content * tr.a2 {
  background-color: blue;
}
<div id="content">
  <table>
    <tr class="a1">
      <td>tr 1</td>
    </tr>
    <tr class="a2">
      <td>tr 2</td>
    </tr>
  </table>

</div>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15223

You need to wrap additionally in <td>...</td> tags.

Here is the correct structure for a regular table:

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

You can read more here.

#content {
    float: right;
    width: 98%;
    padding-top: 15px;

}

#content tr.a1 {
    color: #F1F1F1;
}

#content tr.a2 {
    color: #F2FFFF;
}
<div id="content">
  <table>
   <tr class="a1">
    <td>123<td> 
   </tr>
   <tr class="a2">
    <td>123<td> 
   </tr>
  </table>
</div>

Upvotes: 2

Related Questions