Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Selectors Advanced Selectors :not() – The Negation Pseudo-Class

shaleeneejadoopat
shaleeneejadoopat
5,456 Points
Posted by shaleeneejadoopat
shaleeneejadoopat
5,456 Points

Why use parenthesis and square brackets at the same time?

Why do the :not negation open and close parenthesis need that square brackets that have the type value of button?

2 Answers

Nathaniel Satriya
Nathaniel Satriya
2,560 Points

It is not that the :not pseudo-class itself needs square brackets; it is because Guil is using an attribute selector in conjunction with the :not pseudo-class.

Basically, Guil is telling the browser to target every element except input elements with a type value of "button".

You could also use the :not pseudo-selector in this way:

:not(.no-style) { /*styles all elements that do not have the class "no-style"*/
  background-color: blue;
}
Nathaniel Satriya
Nathaniel Satriya
2,560 Points

You're welcome!

And by the way, I am not yet very good at coding, so the code that I posted in my answer may not be 100% correct.

shaleeneejadoopat
shaleeneejadoopat
5,456 Points
shaleeneejadoopat
shaleeneejadoopat
5,456 Points

Neither do I lol.... I guess that's why we're at HouseTreeHouse. What is your field of interest, Web Design or Development ?

Kevin Faust
Kevin Faust
15,353 Points
Kevin Faust
Kevin Faust
15,353 Points

im gunna slip in here and say Hello :)

Trevor Covington
Trevor Covington
9,050 Points
Trevor Covington
Trevor Covington
9,050 Points

If you really wanted to use attribute selectors with classes you could write it like this too:

:not([class="no-style"]) { /* styles all elements that do not have the class "no-style"*/
    background-color: blue;
}

As to why do it this way, I have no idea.

Nathaniel Satriya
Nathaniel Satriya
2,560 Points
Nathaniel Satriya
Nathaniel Satriya
2,560 Points

I'm not sure; I like all coding and have learned to code in many languages. Web Design is honestly more fun though.