Search code examples
csselementopacitydocument-body

Style every element of page but one

I want to style every element of my page except for a particular div. I believe this is done with :not, but I'm not sure. I'm doing this to make the opacity of all elements 0.7, except for a popup.

Solution

  • Here is my alternative sugestion: a layer with opacity in front of the web, but behind the overlay.

    Here is an example: https://jsfiddle.net/j1jodsej/

    HTML

    <div id="overlaybg"></div>
<div id="overlay">
    I'm the overlay
</div>

    CSS

    #content {
    text-align: justify;
}
#overlaybg {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0.5);
}
#overlay {
    position: fixed;
    z-index: 2;
    top: 30px;
    background: #FFF;
    text-align: center;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    padding: 30px;
}