CSS display none not working on a div if I only target its class

Question

I have two div containing font awesome quotation marks.

    <div class="fas fa-quote-left fa-quote"></div>
    <div class="fas fa-quote-right fa-quote"></div>

I want to hide these two div when the screen is smaller than 768px.

@media (max-width: 767.98px) {
    .fa-quote {
        display: none;
    }
}

The above didn't work.
But when I added div in front of .fa-quote, it worked!
Like this:

@media (max-width: 767.98px) {
    div .fa-quote {
        display: none;
    }
}

I want to know what's going on here. What makes the difference?
Thanks in advance.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — CBroe, Apr 23 '21 at 08:42

score 0 · Answer 1 · answered Apr 23 '21 at 09:58

The difference is the level on which the css is specific enough to proceed other class declarations and the last declaration of the same level.

so if your css code proceeds the fontawesome one, and one says display:none, while the other one says display:block , it will use the last read value.

UNLESS your definition is more specific. the more specific you target a class the more effect it will have.

You can also use display:none!important to make sure your definition gets a higher priority. However be carefull with this as it can cause hard to track/read css code.

CSS display none not working on a div if I only target its class

1 Answers1