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

user_3529987 0
Viewed 47

I want to set every div with the class="wp-block-column" to 'display:none;' --> but not the first one.

I am having trouble :not selecting the first div with the class="wp-block-column"

BOTTOM LINE: I want to select all divs with the class="wp-block-column" throughout the page regardless of where they land or who their parent is --> but not the first instance. I want to select instances from the body, not a parent div.

<div class="menu-column"> only appears inside <div class="seventy-thirty-block"> but there could be 1 or 5 of these blocks, they are generated from a loop.

There could also be any number of blocks that are not <div class="seventy-thirty-block">before.

The css on this page works because :not(:nth-child(2) gets the second child of <div class="singleBlogContent">

But if I uncomment

<!--   

<div class="callout-full-block">
      </div>

  -->

then it no longer works because now it's :not(:nth-child(3)

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 class="singleBlogContent">

  <div class="callout-full-block">
  </div> 

<!--   <div class="callout-full-block">
  </div>  -->
  
  <div class="seventy-thirty-block">
    <div class="container">
      <div class="seventy-thirty-columns">
        <div>
          <div>
            content
          </div>
        </div>
        <div class="wp-block-column">
          <div class="menu-column">
            menu
          </div>
        </div>
      </div>
    </div>  
  </div>

  <div class="seventy-thirty-block">
    <div class="container">
      <div class="seventy-thirty-columns">
        <div>
          <div>
            content
          </div>
        </div>
        <div class="wp-block-column">
          <div class="menu-column">
            menu
          </div>
        </div>
      </div>
    </div>  
  </div>


  <div class="seventy-thirty-block">
    <div class="container">
      <div class="seventy-thirty-columns">
        <div>
          <div>
            content
          </div>
        </div>
        <div class="wp-block-column">
          <div class="menu-column">
            menu
          </div>
        </div>
      </div>
    </div>  
  </div>

</div>

This is my css:

div.seventy-thirty-block:not(:nth-child(2)) .wp-block-column .menu-column {
    display:none;
}
css-psuedo-class css-selectors css
2 Answers

In my opinion, you need to add class container like so:

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

Now it selects sibling divs with the class container (being siblings is the key point) but neglects the first one.

user_153289900

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;
}
user_16791260
Related