hidden

[m1a1t]

   <div id="buttons" class="hidden">
                        <button>1</button>
                        <button>2</button>
                        <button>3</button>
                        <button>4</button> 
                </div>

    #buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .hidden {
        display: none;
    }

Please help me understand why this is not hidden?

 

[m1a1t]

I think I've solved it now by simplifying it down like this and as sometimes is the case that when you ask for help the answer presents itself. It's because the ID is more specific than the class and so the id overrides the class of the display:none;

I don't know if the display: grid; was part of it because I have other elements with display: flex; etc and the hidden was working ok.

I've wrapped it in a container and now I can make it do what I wanted

<div id="button-container" class="hidden">
  <div class="buttons">
     some content
  </div>
</div>

 

[tomliv]

The reason is because in CSS, styles using an id selector have higher specificity than class selectors and will override the class selector styles.

Specificity - CSS | MDN

Specificity is the weight that browsers use in the cascade algorithm to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates this weight from a CSS selector, and compares...

developer.mozilla.org

You can get past this by changing your selector to:

#buttons.hidden{display:none;}