Why cannot I select two properties if their parent element is selected using ID instead of class?

Question

I have a nav element that has an ID named "menu" and inside it, there are 6 "a" elements. I am trying to select two of them using their IDs. But it's not working.

But if I select the nav element using a class and edit the CSS selectors accordingly, the style works perfectly. So, why it's not working with an ID but working fine with a class?

#menu {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 10px;
        }
        
        #logo {
            margin-right: auto;
        }
        
        #menu a {
            padding: 0 5px;
            margin: 0 10px;
        }
        
        #hamburger {
            display: none;
            cursor: pointer;
            padding: 5px;
        }
        
        .menubar {
            width: 30px;
            height: 5px;
            background-color: black;
            margin: 5px 0;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        @media screen and (max-width:992px) {
            #hamburger {
                display: block
            }
            #menu a:not([id=logo]) {
                display: none
            }
        }

<nav id="menu">
        <a id="logo" href="#"><img src="images/Logo.png" alt="logo"></a>
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
        <a id="hamburger">
            <div class="menubar"></div>
            <div class="menubar"></div>
            <div class="menubar"></div>
        </a>
    </nav>

score 0 · Accepted Answer · answered Mar 01 '21 at 18:25

This is a CSS specificity issue. Your #menu a selector beats out your #hamburger and #logo selectors. In general an #id tag selector is always more specific than an #id selector. To make the latter selectors more specific you can also prepend them with #menu like so:

#menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
}

#logo {
    margin-right: auto;
}

#menu a {
    padding: 0 5px;
    margin: 0 10px;
}

#hamburger {
    display: none;
    cursor: pointer;
    padding: 5px;
}

.menubar {
    width: 30px;
    height: 5px;
    background-color: black;
    margin: 5px 0;
}

a {
    text-decoration: none;
    color: black;
}

@media screen and (max-width:992px) {
    #menu a {
        display: none
    }
    #menu #hamburger {
        display: block
    }
    #menu #logo {
        display: block
    }
}

<nav id="menu">
        <a id="logo" href="#"><img src="images/Logo.png" alt="logo"></a>
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
        <a id="hamburger">
            <div class="menubar"></div>
            <div class="menubar"></div>
            <div class="menubar"></div>
        </a>
    </nav>

The reason changing the #menu id to a .menu class fixes the issue is because .class tag is less specific than #id.

Why cannot I select two properties if their parent element is selected using ID instead of class?

1 Answers1