Why does id not override class in bootstrap?
css, html, twitter-bootstrap
Solution
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.
Problem
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.