CODEWITHSUNDEEP
htmlcsscss-selectors
Srinivas Rathikrindi
Srinivas Rathikrindi

Reputation: 576

How to select first TD inside table which is inside a particular div

I want select the first td of my table using css selector. Here is my Html code. 

<div class="mydiv">
    <table class="mytable">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Here is my CSS code first attempt.

 div.mydiv > table > tbody > tr > td 
    {
        width:25px ;
    }

second attempt

div.mydiv > table  > tr > td 
{
    width:25px ;
}

It seems none of them are working.

Regards.

Upvotes: 1

Views: 2886

Answers (6)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Since you only have one element .mydiv table just use :first-of-type, nth-child(1) or :first-child:

div.mydiv td:first-of-type {
    width:25px
}
<div class="mydiv">
    <table class="mytable">
        <tbody>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </tbody>
    </table>
</div>

There is no need of using !important here that is bad practice.

enter image description here

Upvotes: 1

KoemsieLy
KoemsieLy

Reputation: 722

Try this:

div.mydiv table.mytable tr > td:first-child {
    width:25px !important;
    color: #ff0000;
}

See example below:

http://jsfiddle.net/kb3gN/8866/

Upvotes: 0

Deepak Goswami
Deepak Goswami

Reputation: 2030

Try this:

table.myTable > tbody > tr:first-child > td:first-child {
    width:25px !important;
}

Happy Coding!

Upvotes: 0

Flumra
Flumra

Reputation: 1

You could use the :first-child pseudo-selectors:

tr td:first-child
{
    /* styles */
}

You could also use ´:first-of-type´.

Reference: http://www.w3.org/TR/css3-selectors/#selectors

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 1776

div.mydiv > table > tbody > tr > td:first-child{

}

This will select the first child of tr which is td. This should give you what you need.
Hope this helps

Upvotes: 1

kitensei
kitensei

Reputation: 2530

Try this:

div.mydiv > table > tbody > td:first-of-type {
    width:25px !important
}

Upvotes: 1

Related Questions