CODEWITHSUNDEEP
htmlcsscss-selectors
Apostolos
Apostolos

Reputation: 8121

Css selectors and selecting specific element

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

Upvotes: 0

Views: 71

Answers (2)

Ishan Jain
Ishan Jain

Reputation: 8171

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

Upvotes: 0

Mister Epic
Mister Epic

Reputation: 16743

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/

Upvotes: 4

Related Questions