Multiple css pseudo-class

Question

I was wondering, what is the correct syntax to do this:

@media only screen and (max-width: 780px){
    .header-toolbar-contact:nth-child(1){
        display: none !important;
    }
    .header-toolbar-contact:nth-child(2){
        display: none !important;
    }
}

I tried this:

@media only screen and (max-width: 780px){ .header-toolbar-contact:not(.header-toolbar-contact:nth-child(3)){ display: none !important; } }

But doesn't seems to work. My question is: how to use multiple pseudo-classes in one declaration. As if it was "nested".

Answer 1

Comma separate the classnames:

@media only screen and (max-width: 780px){
    .header-toolbar-contact:nth-child(1),
    .header-toolbar-contact:nth-child(2) {
        display: none !important;
    }
}

Css allows multiple selectors to use the same rules with comma separated selectors. You can use as many as you wish.

Answer 2

Instead of passing full class name to :not() simply pass :nth-child(3)

.header-toolbar-contact:not(:nth-child(3)) {
  display: none;
}

<div class="header-toolbar-contact">First</div>
<div class="header-toolbar-contact">Second</div>
<div class="header-toolbar-contact">Third</div>