CODEWITHSUNDEEP
css
JJ Pagac
JJ Pagac

Reputation: 31

Understanding the :not selector css

I'm trying to get my head around the not selector is css. I'm trying to hide a div called "InfoRow" if the page doesn't have a class of 'home'

My first stab at this:

:not(body.home #InfoRow)  {
    display:none;
}

Upvotes: 2

Views: 77

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

From MDN:

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

:not(.foo) will match anything that isn't .foo, including <html> and <body>

As the class .home would be set on the <body> tag, and #InfoRow is a child of <body>, you'd have to write it like this:

body:not(.home) #InfoRow {
    display: none;
}

Upvotes: 2

Related Questions