When inspector shows this -
class="top_menu dropmenu notify_dropdown"
What is correct css to address last element?
Last element of what?
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.
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.
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.
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.