CSS选择器和选择特定元素

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

Answer 1

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/

Answer 2

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