Question

I have html that is dynamically created when I bind my gridview to a data source. What i’m curious about is how can i use css to access an individual column and even individual cells? If i was manually creating the html i would put an id attribute in there but i’m able to because it’s dynamically created when the program begins. Here is the html out put generated

<div>
    <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolderHome_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Date</th><th scope="col">Project</th><th scope="col">Amount</th>
        </tr><tr>
            <td>1/1/2011 12:00:00 AM</td><td>CTS</td><td>1000.99</td>
        </tr><tr>
            <td>2/1/2011 12:00:00 AM</td><td>ABC Company</td><td>1001.99</td>
        </tr><tr>
            <td>1/3/2011 12:00:00 AM</td><td>CTS</td><td>1002.99</td>
        </tr><tr>
            <td>4/1/2011 12:00:00 AM</td><td>CTS</td><td>1003.99</td>
        </tr>
    </table>
</div>

Answer 1

The table has an id, so you can use that to access the elements inside that table.
For example, to select the second cell on the third row, you can use:

#ContentPlaceHolderHome_GridView1 tr:nth-child(3) td:nth-child(2)

• The nth-child() selector is supported on all major browsers except IE8 and earlier.