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

Question

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

Answer 1

Assign the first one a unique class then assign it display: block; after the initial ruleset for display: none. If you want a dynamic solution, you should use JavaScript. See Figure I
Figure I
document.querySelectorAll('.wp')[0].classList.add('.first');
.wp {
display: none;
}
.first {
display: block
}
<main>
<div class='wp first'>First</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
<div class='wp'>WP</div>
</main>