How can you have a tag with inherited classes?

Question

I'm using plain CSS, making tables. I want every odd row in a table highlighted to make it easier to read. But I want different tables to be of different colors.

It would seem this should work:

CSS file:

.redtable.odd {background-color:red;}
.yellowtable.odd {background-color: yellow;}

HTML file:

<table class="redtable">
  <tr class="odd"><td>row</td><td>1</td></tr>
  <tr><td>row</td><td>2</td></tr>
  <tr class="odd"><td>row</td><td>3</td></tr>
</table>

<table class="yellowtable">
  <tr class="odd"><td>row</td><td>1</td></tr>
  <tr><td>row</td><td>2</td></tr>
  <tr class="odd"><td>row</td><td>3</td></tr>
</table>

But the <tr> tags don't seem to know that they're of class redtable or yellowtable. Isn't the "C" of "CSS" supposed to mean "Cascading"? Shouldn't these nested tags inherit classes?

(I'd really rather not have to add the explicit class to every single <tr>. The real tables are hundreds of rows long.)

JSFiddle link: https://jsfiddle.net/tr0moyo0/

Thanks.

When you put two selectors together it means they are at the same level, add a space `.redtable .odd` in between the selectors to add the style to the children — , May 17 '18 at 00:45
That worked! If you add an answer, I'll give you credit for the solution. — Adam Smith, May 17 '18 at 00:50
Whoever marked this as a duplicate: I would suggest that this is *not* an "exact duplicate", since it's not obvious that that was my bug. Nor will it be obvious to those who come after. — Adam Smith, May 17 '18 at 00:59
The duplicate make your bug obvious and this is the purpose of a duplicate ... it has not to be an "exact duplicate" in terms of content (don't pay attention to words) but a duplicate in terms of issue ... so the solution to your issue is inside this duplicate. By understanding what a space mean in a CSS selector you can solve your issue — Temani Afif, May 17 '18 at 01:07
I played with it @KacosPro for about 10 minutes. Seems a neat idea, but I couldn't get it to work. (But I did upvote it.) — Adam Smith, May 17 '18 at 22:44
@AdamSmith thats strange, it should work [look](https://jsfiddle.net/tr0moyo0/2/), it's a better solution IMO, that way you don't have to declare each odd row. — , May 17 '18 at 23:04
Interesting. Well, I just gave Randy the credit for the solution. Thanks for taking the time to JSFiddle it. — Adam Smith, May 17 '18 at 23:25

Randy Casburn · Accepted Answer · 2023-06-09T13:42:21.180

0

The real solution here is to not use CSS classes at all. You can accomplish this very simply this this:

table:nth-child(even) tr:nth-child(odd) {
  background-color: red;
}
table:nth-child(odd) tr:nth-child(odd) {
  background-color: blue;
}

edited Jun 09 '23 at 13:42

answered May 17 '18 at 00:51

Randy Casburn

13,840
1
16
31

There appear to be typos where the `tr` type selector is written as 'r' `r:nth-child(odd)` – Tim R Jun 09 '23 at 04:07

score -2 · Answer 2 · answered May 17 '18 at 00:46

-2

Add a new class to each to note where is red and yellow. If it in the same form then you can inherit by the spesific class.

answered May 17 '18 at 00:46

j.me

17
3

How can you have a tag with inherited classes?

2 Answers2