Why does id not override class in bootstrap?

Question

I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.

HTML

<div class="container">
    <div class="jumbotron">
        <button type="button" id="jnav">Restricted</button>
    </div>
</div>

style.css

#jnav{
    opacity: 1;
}

From bootstrap.css

.jumbotron {

opacity: 0.75;


}

Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.

Opacity is compounded with the inherited value. So your `#jnav` will effectively get `1 * 0.75` - If you set it to `0.5`, it will get `0.5 * 0.75` - And the fun fact is you cannot give it a value like `2` expecting it to become fully opaque. — techfoobar, Jul 16 '14 at 00:29

score 4 · Accepted Answer · answered Jul 16 '14 at 00:32

Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like @techfoobar said. You can read more here.

Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.

Good to know...more annoying, but it definitely worked – Neal Jul 16 '14 at 01:13 — Neal, Jul 16 '14 at 01:13

score 1 · Answer 2 · answered Jul 16 '14 at 00:32

It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.

Basically what Jcubed just said above.

score 0 · Answer 3 · answered Jul 16 '14 at 00:30

Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.

This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.

If worst comes to absolutely worst, then you can use:

#jnav{
    opacity: 1 !important;
}

But this shouldn't need to happen unless you are absolutely desperate.

In this case, specificity is not the issue. Its the opacity being passed from the parent jumbotron. The only way to make the jumbotron's children fully opaque is overriding the opacity of the jumbotron itself. — techfoobar, Jul 16 '14 at 00:31

score 0 · Answer 4 · answered Jul 16 '14 at 00:34

They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.

If you just want the effect, you should use rgba

Example:

#jnav{
    background: rgba(111, 111, 111, 0.1);
}

The last index is the opacity of the background, and it will not overlap with your font.

score 0 · Answer 5 · edited May 23 '17 at 10:26

#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.

As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.

Here's what MDN has to say:

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

View this question, if you want to achieve a transparent background but not the content effect.

Why does id not override class in bootstrap?

5 Answers5