".menu.opened" and ".opened", when should I use which?

Question

I am learning the code in post (https://stackoverflow.com/a/24811368/12214867)

    <style>
        .menu {
            display: none;   
        }

        .menu.opened {
            display: block;
        }
    </style>

according to a comment on that post, the .menu part in .menu.opened is not needed technically, so I tried

    <style>
        .menu {
            display: none;   
        }

        .opened {
            display: block;
        }
    </style>

works well just as before.

So, what is the difference between .menu.opened and .opened, when should I use which?

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

.menu.opened when your elements have both class .menu and .opened => use this if you want to css specify elements which have both class.

.menu .opened when your elements have class .menu or .opened => use this if you want to css all elements which have at least one of these class.

The first

Example: <x class="menu opened"></x> => display block

<x class="menu"></x> => display none

<x class="opened"></x> =>no CSS

The second

Example: <x class="menu opened"></x> => display block or none depend on priority (before, after class or !important)

<x class="menu"></x> => display none

<x class="opened"></x> => display block

".menu.opened" and ".opened", when should I use which?

1 Answers1