Trying to hide a div using CSS

Question

OK, simple question I know - but which of these is correct?

I am trying to hide this div:

<div class="notice important-message">

.notice .important-message {
    display: none
}

or - classes joined together like this:

.notice.important-message {
    display: none
}

*but which of these is correct?* --> test and see – Temani Afif Jun 16 '19 at 08:19 — Temani Afif, Jun 16 '19 at 08:19

score 3 · Answer 1 · edited Jun 16 '19 at 05:16

3

.notice .important-message

would select the element .important-message in this case:

<div class=".notice>
    <div class=".important-message"></div>
</div>

.notice.important-message

selects this:

<div class="notice important-message"></div>

so the second one would be correct. Check this for more references.

edited Jun 16 '19 at 05:16

Sai Manoj

answered Jun 16 '19 at 03:06

BlakkM9

score 0 · Answer 2 · answered Jun 16 '19 at 03:01

0

Second is correct. You can also do div.class1.class2 {}

answered Jun 16 '19 at 03:01

yqing237

Mohammad Ayoub Khan · Answer 3 · 2019-10-11T21:44:23.727

0

Try this

<div class="hide">

.hide {
    display: none;
    visibility: hidden;
    opacity: 0;
}

edited Oct 11 '19 at 21:44

answered Jun 16 '19 at 03:17

score 0 · Answer 4 · answered Jun 16 '19 at 05:33

In this case 2 classes are on same node

<div class="notice important-message">

so to access this code you can use (without space)

.notice.important-message {
    display: none
}

If these 2 classes are on parent child node that is

<div class="notice">
    <div class="important-message">
    </div>
</div>

then you can use (with space)

.notice .important-message {
    display: none
}

4 Answers4