CSS multiple classes

[Sir Osis of Liver]

When inspector shows this -

Code Select Expand


     class="top_menu dropmenu notify_dropdown"


What is correct css to address last element?

[Diego Andrés]

Last element of what?

[Sir Osis of Liver]

I can change background color in top_menu, but would expect that to affect other menus.  Just want to change bg color for notify_dropdown.  I've done it by adding this -

Code Select Expand


.notify_dropdown div {
background: #023570;
}


But don't understand what it means when inspector displays multiple classes as above.

[Diego Andrés]

You could use .top_menu.notify_dropdown so you make sure it only looks for the elements that match both.

But don't understand what it means when inspector displays multiple classes as above.

They would overwrite depending on the specificity of the selector, or the order in which it appeared in the file.

[Sir Osis of Liver]

Will try that, thanks.

Yes, that works same as code I used, but it's more consistent with what inspector displays.  Good for future reference.

[Julius_2000]

A useful css selector I've come to appreciate is :is( )

With that, you can select and combine multiple classes or other elements to which you want to apply a certain style according to their structure.

For instance, if you have more elements that should look the same but are not supposed to affect others, you could write

Code Select Expand

.top_menu dropmenu :is(.notify_dropdown, .myNextElement, #myNextElemtent, ... ) {

   }
Also saves space as you don't have to repeat code.