Forums

chickentulip

Hello everyone,
I want to color the background of every first td in my table. using the code:

table tr> td {
background: lightgreen;
}

The code colors all tds in the table. Can someone explain why? and also help me to produce the code that I am after.

My code is below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<title> Project 1-2012</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
table {
border-collapse: collapse;
margin-bottom: 20px;
}

table tr> td {
background: lightgreen;
}
</style>
</head>

<table  border="1">
<tr>
<td>
Category
</td>
<td>
<select id="select_question">
<option>Addition</option>
<option>Multiplication</option>
<option>Division</option>
<option>Substraction</option>
</select>
</td>
</tr>

<tr>
<td>
Question
</td>
<td>
<select id="questions">
<option>4+5= </option>
<option>4*5=</option>
<option>10/2=</option>
<option>10-2=</option>
</select>
</td>
</tr>
</table>

</body>
</html>

TheDoc

I'm not really sure why this isn't working. Instead, you could use first-child http://jsfiddle.net/3EdFL/

Senff

Using table tr> td does not target the first cell, it targets all td's that are direct children of tr (which, essentially, are all of them).

You'll have to use table tr td:first-child.

chickentulip

Thank you all so much four your help!!!!!

TT_Mark

I may be rocking the boat here, but they are technically 'headings' for the table, so should you not be using

<th>

treehouse : what would you like to learn today?

Forums

[Solved] table tr> td- does not give me the result I want