Pseudo Class :current

Question

I am trying to make my menu bar background go black when you are on that page, eg. if you're on the SFX page the SFX tab will be black, not red.

This is my HTML:

<div id="menuBar" align="left">
    <table cellspacing="5" >
        <tr>
            <td><a href="index2.php">Home</a></td>
            <td><a href="editorial.php">Editorial</a></td>
            <td><a href="sfx.php">SFX</a></td>
            <td><a href="occasion.php">Occasion</a></td>
            <td><a href="artwork.php">Artwork</a></td>
            <td><a href="body.php">Body Painting</a></td>
            <td><a href="contact.php">Contact</a></td>
            <td><a href="about.php">About</a></td>

        </tr>
    </table>
</div>

And My CSS:

#menuBar {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 810px;
    height: 30px;
    top: 53px;
    vertical-align:central;
}
#menuBar a {
    background: #AA0000;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 11px;
    padding-right: 11px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    color: Beige;
    text-decoration: none;
    font-weight:bold;
    font-size:18px;
    font-family: Gabriola,"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;    
}

#menuBar a:hover {
    background: #000000;
    transition:all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3 ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

#menuBar a:focus {
    background:#000000;
}

#menuBar a:current {
    background:#000000;
}

I've tried everything, and its not working. I'm sure it's something simple, but i don't know what it is

Answer 1

Besides being a brand new pseudo-class that was introduced only relatively recently, :current does not mean what you think it means. Ironically, the same draft does propose another new pseudo-class for links to the current document, called :local-link, but neither of these are implemented because they've only just recently been proposed. (In fact, I just discovered that :local-link has been removed from the Selectors 4 ED as of May 2014 — no idea why, but odds that such a pseudo-class ever gets implemented just got much worse.)

Either way, there is currently no pseudo-class for links that point to the current page. You will need to use PHP to determine which of these links points to the current page, add a class="current" to the appropriate element, and target that class.