How do I select every instance of a class on a page, but not the first instance?-CodePudding

I want to set every div with the to 'display:none;' --> but not the first one.

I am having trouble selecting the first div with the

Here is the JS Bin: https://jsbin.com/xowefaj/edit?html,css,output

The output that I want in the JS Bin is: content menu content content

This is my html:

  <div >
    <div >
      <div>
        <div>
          content
        </div>
      </div>

      <div >
        <div >
          menu
        </div>
      </div>
    </div>
  </div>  

  <div >
    <div >
      <div>
        <div>
          content
        </div>
      </div>

      <div >
        <div >
          menu
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div>
        <div>
          content
        </div>
      </div>

      <div >
        <div >
          menu
        </div>
      </div>
    </div>
  </div>

This is my css:

.wp-block-column:not(:nth-of-type(1)) .menu-column {
    display:none;
}

CodePudding user response：

When you select this...

.wp-block-column {

}

...on it's own then apply the specific rule you'd like.

CodePudding user response：

Just target them all and then make a more specific rule that targets the first element and give it a display property.

.wp-block-column .menu-column {
  display:none;
}

.wp-block-column:first-child .menu-column {
  display:block;
}

or looking at your markup it might be the first container you want to target.

.container:first-child .wp-block-column .menu-column {
  display:block;
}

CodePudding user response：

In my opinion, you just need to add class containerlike so:

.container:not(:nth-of-type(1)) .wp-block-column .menu-column {
    display:none;
}

With this code, it selects sibling divs (this is the key point) with the class container but neglects the first one.