Pseudo Class :current
css, css-selectors, html, pseudo-class
Solution
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.
Problem
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