Back to For Beginners

"Class descendant Class" selector in CSS

For Beginners

Started by Servant of the Lord August 22, 2012 08:37 PM

4 comments, last by Servant of the Lord 11 years, 7 months ago

Servant of the Lord

33,739

Author

August 22, 2012 08: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

6,963

August 22, 2012 08:45 PM

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

Beginner in Game Development? Read here. And read here.

Madhed

4,095

August 22, 2012 09: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

33,739

Author

August 22, 2012 10:48 PM

</facepalm>

The CSS was working fine, but (being inline <style> CSS returned from a shortcode) WordPress was puking <p> and </p> every few lines, just to make sure the CSS wouldn't parse correctly.

Which is weird, because I am 85% sure I checked the generated HTML as one of the first things I did to debug it.

Thanks anyway, and sorry for wasting your time.

wicked357

2,424

August 23, 2012 02: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

33,739

Author

August 23, 2012 04: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!

"Class descendant Class" selector in CSS

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

"Class descendant Class" selector in CSS

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines