CSS rule not applied when CSS selector not specific enough

user0wPR 0
Viewed 35

I have a parent div with the class menucontainer where I apply the following style. I want to apply a style to all first children of that parent container but the style is not being applied without adding html body menucontainer > * but it applies the style to .menucontainer without adding html body menucontainer. Can someone explain this behavior or what I'm doing wrong here

.menucontainer
    {
        width: 100%;
        background-color: white;
        list-style-type: none;
        padding: 0;
        overflow: visible;
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
    }

/* this works */
    html body .menucontainer > * {
        margin-right: 40px;
    }

.menucontainer > * {
        margin-right: 40px;
}

This doesn't but this .menucontainer does apply the style to .menucontainer

css html
1 Answers

From www.w3schools.com:

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element.

https://www.w3schools.com/css/css_specificity.asp

Dimitris Maragkos0
Related