CODEWITHSUNDEEP
csscss-selectors
Jettary
Jettary

Reputation: 3

Selecting one element from set only by CSS selectors

I have a table:

<table>
<thead>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>row 1</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 2</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 3</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 4</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 5</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
</tbody>
</table>

How can I select (using only CSS selectors) only one element from td.editable? Analog of jQuery :first selector will be acceptable.

Upvotes: 0

Views: 9457

Answers (4)

Eli
Eli

Reputation: 14827

Not sure this is what you want but try this:

table > tbody > tr > td:nth-child(2) {
    color: red;
}

Demo

Upvotes: 0

klewis
klewis

Reputation: 8379

Is this your only table of td.editable's? Try something like this...

td.editable:nth-child(2) //or 3 or 4, etc...

Upvotes: 0

officert
officert

Reputation: 1232

You could use an n-th child selector. Use one to get at the exact table row that you want, then use a second n-th child to get at the exact <td> element you want. For example if I wanted the second row, and the second <td> element with a class="editable" I could do this:

tr:nth-child(2) > td.editable:nth-child(2)

Upvotes: 1

Laurent S.
Laurent S.

Reputation: 6947

On compatible browsers, you can use the :nth-child pseudo-class

Upvotes: 0

Related Questions