News:

Wondering if this will always be free?  See why free is better.

Main Menu

CSS multiple classes

Started by Sir Osis of Liver, May 24, 2023, 10:11:44 PM

Previous topic - Next topic

Sir Osis of Liver

When inspector shows this -


     class="top_menu dropmenu notify_dropdown"


What is correct css to address last element?
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

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 -


.notify_dropdown div {
background: #023570;
}


But don't understand what it means when inspector displays multiple classes as above.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Diego Andrés

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

Quote from: Sir Osis of Liver on May 24, 2023, 11:24:08 PMBut 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.

SMF Tricks - Free & Premium Responsive Themes for SMF.

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.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

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

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

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

Advertisement: