0

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;
}
6
  • Make sure you ctrl-F5 to reload your css. Commented Sep 21, 2016 at 11:46
  • Yea I did that and still no luck. Syntax look okay then? It works when I create an id for the row but I'd like to figure out why last-child is not working. Commented Sep 21, 2016 at 22:18
  • Send it through a validator, that's often helpful. Or just read the "view source" and look for stuff in red! Maybe the <div> wasn't pasted, but the code here has a stray div close tag. You could also inspect element and make sure it's using that selector. And I assume the alternate color is working? Commented Sep 21, 2016 at 22:52
  • Or it could be that nth-child(odd|even) takes precedence over last-child. Does the last-child get the background color of its oddness? Perhaps try !important. Commented Sep 21, 2016 at 23:03
  • I'll try !important I never heard of that but it would make sense. I ran it through validator. I got two errors. 1. Line 1, Column 1: no document type declaration; will parse without validation 2. Line 32, Column 18: end tag for element "TABLE" which is not open echo("</table>"); Could the PHP echos be confusing things? Commented Sep 21, 2016 at 23:08

0

You must log in to answer this question.

Browse other questions tagged .