I am styline portfolio in PSET7. I am trying to select the last row to make it a different background colour but I can't seem to select it? I have tried various different ways but none work.
HTML
<?php
echo("<table class='portfolio'>");
echo("<tr>");
echo("<th>Symbol</th>");
echo("<th>Name</th>");
echo("<th>Shares</th>");
echo("<th>Price</th>");
echo("<th>Total</th>");
echo("</tr>");
foreach($rows as $row)
{
echo("<tr>");
echo("<td>{$row['symbol']}</td>");
echo("<td>{$row['name']}</td>");
echo("<td>{$row['shares']}</td>");
echo("<td>{$row['price']}</td>");
printf("<td>%d</td>", $row['shares'] * $row['price']);
echo("</tr>");
}
echo("<tr>");
echo("<td></td>");
echo("<td></td>");
echo("<td></td>");
echo("<td>CASH</td>");
echo("<td>$10000</td>");
echo("<tr>");
echo("</table>");
?>
</div>
CSS
/**
* styles.css
*
* Computer Science 50
* Problem Set 7
*
* Global CSS.
*/
.container
{
/* center contents */
margin-left: auto;
margin-right: auto;
text-align: center;
}
#top
{
/* surround with whitespace */
margin-bottom: 15px;
margin-top: 15px;
}
#top .nav
{
/* center navigation pills */
display: inline-block;
}
#middle .form-control
{
/* center form controls */
display: inline-block;
/* override Bootstrap's 100% width for form controls */
width: auto;
}
#bottom
{
/* shrink bottom's font size */
font-size: smaller;
/* surround with whitespace */
margin: 20px;
}
table {
margin-left:auto;
margin-right:auto;
}
th {
text-decoration: underline;
padding: 5px 50px 5px 50px;
font-size: 20px;
}
tr {
border: 2px solid black;
margin: 10px;
font-size: 16px;
}
tr:nth-child(even) {
background-color: #ff6666;
}
tr:nth-child(odd) {
background-color: #ffff66;
}
td {
padding: 5px 0px;
}
tr:last-child {
background-color: grey;
}
last-child
get the background color of its oddness? Perhaps try!important
.