Using class="sponsor_logo" or class="sponsor-logo" does not display the div

user_8977119 0
Viewed 101

I noticed a strange behavior and cannot understand why this is happening, since they do seem to be valid CSS class names (they pass when tested against the regex). using any other words in that pattern works, like happy-world or happy_world. I have created a Codepen here to show what I am experiencing. check here https://codepen.io/akhatri7/pen/LYxMgOz

div {
  min-height: 50px;
  width: 50px;
  margin-bottom: 10px;
}

.sponsorlogo {
  background-color: violet;
}

.sponsor-logo {
  background-color: indigo;
}

.sponsor_logo {
  background-color: blue;
}

.sponsor__logo {
  background-color: green;
}

.happy-world {
  background-color: yellow;
}

.happy_world {
  background-color: red;
}
<div class="sponsorlogo"></div>
<div class="sponsor-logo"></div>
<div class="sponsor_logo"></div>
<div class="sponsor__logo"></div>
<div class="happy-world"></div>
<div class="happy_world"></div>

Using class names sponsor-logo and sponsor__logo works fine. Can someone please explain why this could be happening?

sass stylesheet css html
1 Answers

The divs with classes sponsor-logo and sponsor_logo were not being displayed for me as well. But upon further inspection, I found that the display property of these two divs was set to none by an injected stylesheet.

Injected stylesheets are the ones that Chrome extensions can inject into pages. And the culprit was Adblock Plus, disable the extension and you will see the results are as expected.

user_95310240
Related