Menu
I am trying to hide every other child after first child of classa class element.
div.classa { display:none; } div.classa:first-child { display:block !important; }<div class="content"> <h3>abc</h3> <div class="classa">some content</div> <h3>xyz</h3> <div class="classa">more content</div> <h3>header3</h3> <div class="classa">another content</div> </div>How to achieve this using pure css.
377
Use the :not(selector) Selector Not to Select the First Child in CSS. We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS.
ul:not(:first-child) means literally "any ul element that is not first child of its parent", so it won't match even the 1st ul if it's preceded by another element ( p , heading etc.). On the contrary, ul:not(:first-of-type) means "any ul element except the 1st ul in the container".
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
How to Select all Elements Except the First With the CSS :not(:first-child) Selector. Learn how to select all HTML elements except the first with the CSS `:not(:first-child) selector. If you add the following rule-set to your CSS stylesheet, every h2 element on your entire website will get a 64px top margin.
Check out here https://jsfiddle.net/32vw04jg/1/
<div class="content"> <div> <h3>abc</h3> <div class="classa">some content</div> </div> <div> <h3>xyz</h3> <div class="classa">more content</div> </div> <div> <h3>header3</h3> <div class="classa">another content</div> </div> </div> .content > div:not(:first-child) { display: none; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
