CSS doesn't overwrite other statements

Question

I made a control bar at the bottom of my site. Now i want have a small arrow at the outside top of this bar. But i can't put it outside! Here is a example of my problem: http://jsfiddle.net/HHcwb/2/

And the Code: HTML:

<div id="control">
<p title="Show Bar" id="show">]</p>

​

CSS:

#control{
    position:absolute;
    bottom:0px;
    background:rgba(51, 51, 51, 0.7);
    width:30%;
    height: 75px;
    text-align:center;
    left:35%;
    border-top-left-radius:100px 50px;
    border-top-right-radius:100px 50px;
}
#control p{
    position:absolute;
    margin:0;
    cursor:pointer;
    font-family:'WebSymbolsRegular';
    color:#bbb;
    font-size:16px;
    top:1px;
    transition:color 0.3s ease;
    -webkit-transition:color 0.3s ease;
    -moz-transition:color 0.3s ease;
    -o-transition:color 0.3s ease;
}
#control p:hover{
    color:#E4DBBF;
}
#show{
    left:49%;
    top:-20px;
}​

Answer 1

You could use !important, but this could cause problems in the future. The problem itself is caused by a specificity issue. If you replace

#show{
left:49%;
top:-20px ;
}​

with

#control #show{
left:49%;
top:-20px ;
}​

it will also work, this is because you have raised the specificity by supplying 2 id's as a selector, meaning the browser parses those rules as more important

Answer 2

#show consists of "An id selector".

#control p consists of "An id selector AND a type selector"

The latter is more specific, so it wins the cascade.

Use #control #show instead.