Css selectors and selecting specific element

Question

I have a table with this form

<table class="myclass">
    <thead>
        <tr>
            <th colspan="7">something</th>
        <tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>
    </thead>
    <tbody>
        etc...

I want to apply a css rule only to the th with something. That is the descedant of tr which in turn is the first descendant of thead which in turn is descendant of table with myclass I use this css selector

table.myclass thead > tr th{
    background-color:red;
}

but is also applied in all the other th's in the thead (1, 2, 3, etc). Have i missunderstood the selector thing?

Any good tutorials about advanced selectors?

And a sample jsfiddle

Mister Epic · Accepted Answer · 2013-11-19 13:54:52Z

4

You need to specify that you only want to select the th that is the descendent of the tr that is the first child of the thead:

table.myclass thead > tr:first-child th

ref: http://css-tricks.com/almanac/selectors/f/first-child/

fiddle: http://jsfiddle.net/3P9nT/1/

answered Nov 19, 2013 at 13:54

Mister Epic

16.8k13 gold badges88 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ishan Jain · Accepted Answer · 2013-11-19 14:02:31Z

0

As your requirement, you only want to apply CSS for first tr > th . So for this you can use :first-child css selecter:

table.myclass thead > tr:first-child th{
    background-color:red;
}

Try in fiddle

Your fiddle

answered Nov 19, 2013 at 14:02

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

Collectives™ on Stack Overflow

Css selectors and selecting specific element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related