🔒 Locked

"Class descendant Class" selector in CSS

Servant of the Lord · 2012-08-22T20:37:20+00:00

Hey, I have two classes in CSS: .table_hidden .table_left_column I can't get the CSS selector to work to match this. The selector: .table_hidden .table_left_column { vertical-align: top; color: red; } The HTML: <table class="table_hidden"> <tr><td align="center" colspan="2"><h2>Header</h2></td></tr> <tr><td class="table_left_column">Stuff</td><td>Text</td></tr> </table> I'm expecting that, at the very least, the color of the text in the table should turn red - but it does not turn red. Am I using the selector correctly?

Started by Servant of the Lord Aug 22, 2012 at 8:37 PM 4 replies 1.9k views

Original Post

Servant of the Lord

Aug 22, 2012 at 8:37 PM

Hey, I have two classes in CSS:

.table_hidden
.table_left_column

I can't get the CSS selector to work to match this.

The selector:
.table_hidden .table_left_column { vertical-align: top; color: red; }

The HTML:
<table class="table_hidden"> <tr><td align="center" colspan="2"><h2>Header</h2></td></tr> <tr><td class="table_left_column">Stuff</td><td>Text</td></tr> </table>

I'm expecting that, at the very least, the color of the text in the table should turn red - but it does not turn red.

Am I using the selector correctly?

Alpha_ProgDes

Aug 22, 2012 at 8:45 PM

Maybe
[source lang="css"]table.table_hidden > tr > td.table_left_column[/source]
? I believe it's something like that.

Madhed

Aug 22, 2012 at 9:37 PM

The selector looks correct.
Maybe you have another rule with a higher specificity that overwrites your selector?

What does firebug/whatever inspector you use show?

Servant of the Lord

Aug 22, 2012 at 10:48 PM

The CSS was working fine, but (being inline

wicked357

Aug 23, 2012 at 2:08 PM

I dont know if you intended for this to happen but what I get is Stuff is red the rest isn't. If you were going for it all to be red you are missing a comma in your css.
So instead of .table_hidden .table_left_column put a , inbetween them. If you intended on just stuff being red then why have .table_hidden in there at all? Just .table_left_column will do just fine.

Servant of the Lord

Aug 23, 2012 at 4:07 PM

Yes, the intention was that just "Stuff" is red. The reason why I needed ".table_hidden .table_left_column", was because I also have ".table_normal .table_left_column" and ".table_nice .table_left_column" - it's deliberate. Excellent catch though!

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.