accessing embedded divs and html code

Take the following code example. How can I access element two via CSS without affecting the other elements? Sorry for dumb noobie question.

<div id="content">

<table id="data">
<tr id="element_1"><td></td><td>element 1</td><td class="data">xxx</td></tr>
<tr id="element_2"><td></td><td>element 2</td><td class="data">xxx</td></tr>
<tr id="element_3"><td></td><td>element 3</td><td class="data">xxx</td></tr>
</table>
<div>

Say I want to change the second element only. How could I code it?

what if the division was also within another division, like this?

<div id="page"
<div id="content">

<table id="data">
<tr id="element_1"><td></td><td>element 1</td><td class="data">xxx</td></tr>
<tr id="element_2"><td></td><td>element 2</td><td class="data">xxx</td></tr>
<tr id="element_3"><td></td><td>element 3</td><td class="data">xxx</td></tr>
</table>
<div>
<div>

Well you could use the id as reference:

#element_2 {....}

If you dont want to use the id you could probably use the first-child selector and then the "+" for next sibling.

#data:first-child + tr {...} should give you the 2. child

#data:first-child + tr + tr {...} should give you the 3. child

and so on.

I didn't test the second one, but afaik it should work...

With CSS3 you can also select the nth child directly:

#data:nth-child(3) {...} should give you the 3. child