CODEWITHSUNDEEP
csssyntaxnestedpseudo-class
Zac
Zac

Reputation: 121

Multiple css pseudo-class

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".

Upvotes: 2

Views: 993

Answers (2)

Justinas
Justinas

Reputation: 43479

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>

Upvotes: 1

Kyle
Kyle

Reputation: 67194

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.

Upvotes: 2

Related Questions