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.

Answer 1

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.