CODEWITHSUNDEEP
htmlcsscss-specificity
Gerard
Gerard

Reputation: 679

!important specificity override not working

I was designing a nav bar button, when I got a specificity conflict in the opacity. I used the !important override, but that doesn't seem to be working. Any clues as to the reason?

HTML:

    <body>
    <div class="container">
        <span id="text">Lorem Ipsum</div>
    </div>
</body>

CSS:

    .container {
            background-color: #000;
            opacity:0;
            height: 30px; 
            width: 122px; 
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            position:absolute;
            top:40%;
            left:43%;
        }

         #text { 
            color: #fff;
            -moz-user-select: none;
            -webkit-user-select: none;
            font-family: Courier;
            position:absolute;
            top: 5px;
            left: 5px;
            width: 122px;
            opacity:1; !important;
        }

        body {
            background-color: #808080;
        }

After this all I get is a blank gray background (due to the background-color styling). I know it makes much more sense to not nest the span in the div, but I need to do that for animation purposes.

Upvotes: 0

Views: 443

Answers (2)

sandeep
sandeep

Reputation: 92793

First

Declare !important write this opacity:1 !important; instead of this opacity:1; !important;.

Second

you define Opacity to #text parent that's why it's take it's parent opacity. So, instead of opacity you can use RGBA().

Write like this:

.container {
            background-color:rgba(0,0,0,0);
        }

Filter for IE

background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000);   /* IE6 & 7 */      
zoom: 1;

Upvotes: 0

mgraph
mgraph

Reputation: 15338

must be like that :

opacity:1 !important;

no ; before !important

if .container have opacity:0 then all elements inside this div will not be visible, even if you add opacity:1 !important; to #text

Upvotes: 2

Related Questions