CSS not being included into rules for <div> element-CodePudding

I have the following HTML file (simplified)

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>SineRider</title>
    <link href='App/style.css' rel='stylesheet' type='text/css'/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  </head>
  <body>
    <div class='veil' id='mobile-warning-veil' hide=true>
      <div class='string' id='mobile-warning-remarks'>
        <p>Sinerider is best played on wider screens.</p>
      </div>
      <button class='string button' id='mobile-warning-dismiss'>Nevermind, let me in</button>
    </div>
  </body>
</html>

which as seen uses the following (again, simplified) CSS stylesheet

#mobile-warning-veil {
    opacity: 1;
}

body {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  margin: 0;
  padding: 0;

  font-family: 'Roboto Mono';

  color: #333;
  background: #fff;

  font-size: 18px;

  overflow: hidden;
  user-select: none;
}

html {
  overflow: hidden;
}

.veil {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  opacity: 1;
  transition: 1s;

  background: white;
  pointer-events: all;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.veil[hide=true] {
  opacity: 0;
  pointer-events: none;
}

however, when I load the HTML file, the mobile-warning-veil still has opacity set to 0, and using the devtools I can see that the rules I defined have not been applied at all. I have tripled-checked the selectors and I am almost 100% certain that they're correct. What could be the reason for the rules to not apply here?

if you feel you need more context, here you can see the full, unsimplified code

CodePudding user response：

You didn't close the div tag.
You need to add !important in your style.

I've marked both of them with comments in the code

const button = document.querySelector('.button');
button.addEventListener('click', () => {
  document.querySelector('#mobile-warning-veil').setAttribute('hide', 'false');
})

#mobile-warning-veil {
  opacity: 1;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  font-family: 'Roboto Mono';
  color: #333;
  background: #fff;
  font-size: 18px;
  overflow: hidden;
  user-select: none;
}

html {
  overflow: hidden;
}

.veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition: 1s;
  background: white;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.veil[hide=true] {
  opacity: 0 !important;
  /* I added !important */
  pointer-events: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>SineRider</title>
  <link href='App/style.css' rel='stylesheet' type='text/css' />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>

<body>
  <div class='veil' id='mobile-warning-veil' hide=true>
    <div class='string' id='mobile-warning-remarks'>
      <p>Sinerider is best played on wider screens.</p>
    </div>
  </div> <!-- You didn't close the DIV tag -->
  <button class='string button' id='mobile-warning-dismiss'>Nevermind, let me in</button>

</body>

</html>

CodePudding user response：

The background-color of a div is white.

So opacity 1 is 100% color with no transparency. It cover all with its background.

When the opacity is 0 (when hide), all another elements are displayed.

Close <div> after all to be container of others.

When it's close before the next div is covered all

CodePudding user response：

Checked out the commit you shared.

#mobile-warning-veil has opacity 0 when width is greater than 600px due to below styling:

.veil[hide=true] {
  opacity: 0;
  pointer-events: none;
}

and for width less than 600px, the following media-query is applied:

@media screen and (max-width: 600px) { 
  #mobile-warning-veil{
    opacity: 1;
    color: #676767;
  }
}

What happens is the id selector is more specific than the attribute selector so when media-query is active, that styling is applied. Otherwise, the first one is. You need to keep the specificity of selectors in mind to get the desired result.

Note: I did have to remove the comment above media-query and only then did it start working. You can look into that too.