Trying to disable all notifications except for one on woocommerce checkout page with css

Below is the structure of the html, I am trying to display: none all but one of the notifications that appear when a user doesn’t fill in the required fields on a woocommerce checkout page (the children of woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout).

<div class=”woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout”>
<!—->
<div class=”woocommerce-error alert alert_error” role=”alert”>
<div class=”alert_wrapper”>Please fill in the required information</div>
<a class=”close” href=”#”><i class=”icon-cancel”></i></a>
</div>
<!—->
<div class=”woocommerce-error alert alert_error” role=”alert”>
<div class=”alert_wrapper”>Please fill in the required information</div>
<a class=”close” href=”#”><i class=”icon-cancel”></i></a>
</div>
<!—->
<div class=”woocommerce-error alert alert_error” role=”alert”>
<div class=”alert_wrapper”>Please fill in the required information</div>
<a class=”close” href=”#”><i class=”icon-cancel”></i></a>
</div>
<!—->
</div>

I have tried :not(:first-child), :not(:first-of-type), :nth-child(n+1) and some others. Something that might help with the problem is that when I do nth-child(1) all of the notifications disappear instead of the first one just disappearing, and then nth-child(2) brings all the notifications back…instead of just removing the second child. So it seems all the notifications are combined in one child somehow.

Read more here:: Trying to disable all notifications except for one on woocommerce checkout page with css

Leave a Reply

Your email address will not be published. Required fields are marked *