-1

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.

closed as off-topic by Michael, Krzysiek Dróżdż, Mark Kaplun, Jacob Peattie, EAMann May 18 '18 at 5:13

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

0

Even though the css selector I used doesn't match the HTML structure, this worked for only allowing one notification through when more than one field is not filled out on the checkout page of a woocommerce site:

#Content > div > div > div > div.section.mcb-section > div > div > div > div > div > div > form.checkout.woocommerce-checkout > div.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout:nth-child(1) > div:nth-child(n+2) {
  display: none;
}

Not sure why > div:nth-child(n+2), all I should need is the first nth-child to be nth-child(n+1)

Not the answer you're looking for? Browse other questions tagged or ask your own question.