Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Selectors!
You have completed CSS Selectors!
Preview
The :not() pseudo-class is referred to as a negation pseudo-class because it selects everything except the element we specify in the selector.
Quick Reference
Using :not()
This selector targets all input elements that do not have a type value of button:
input:not([type="button"]) {
border-color: blue;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Finally, there's a special pseudo-class
that's referred to
0:00
as a negation pseudo-class because it
selects everything except the element we
0:03
specify in the selector and we can use it
with just about any type of selector.
0:08
So for example, in our style sheet, let's
create one of these not selectors.
0:13
So if we wanna target all divs, that do
not have the ID of say, col-a.
0:18
So target all the divs on the page, except
for this div with the ID col-a.
0:26
We can do that with the not selector.
0:30
So let's create our selector by first
targeting div followed by colon and
0:33
then not then a set of parenthesis.
0:38
So in between the parenthesis is where we
need to specify the type of
0:41
element we do not want to target.
0:45
In this case we do not want to target a
div with the ID col-a.
0:47
So, for every div that does not have the
id col-a we're gonna give it a red border.
0:52
So let's add a border property and let's
set the value two solid one pixel red.
0:58
All right, so once we save our style sheet
and refresh the page,
1:03
notice how every div on the page except
for the col-a div has the red
1:07
border applied because we've explicitly
told the browser not to target it.
1:13
And we can also include an element's
attribute and
1:17
value in the not argument, and this can be
useful for styling certain form elements.
1:20
So for example, if we want to target all
input elements in
1:25
our form that do not have the type value
of submit.
1:29
We can do that so let's go back to our not
rule, and
1:33
this time in between the parentheses we'll
need to include a set of square brackets,
1:37
and then inside the brackets we're going
to specify the attribute and value.
1:42
So we're going to say type equals submit
then instead of div,
1:45
we'll want to use the input selector.
1:52
So, for input elements that do not have a
type value of submit,
1:55
let's give them a box-shadow.
2:00
So, once again, we'll type the box shadow
property, and let's set the first
2:02
offset to zero, the second one to two
pixels, we'll give it a blur of zero,
2:06
and let's set the RGBA value to black with
000,
2:11
and finally we'll give it an alpha of .15.
2:16
And let's make our box shadow an inset
shadow.
2:20
So right before the first value, let's add
the keyword inset.
2:24
So now, when we save our file and
2:28
refresh the page, notice how the submit
button does not have the box shadow.
2:29
But the two imput fields above it have
that inset box shadow.
2:34
Because again, we've told the browser not
to target the submit input element.
2:38
But, it's okay to target all other input
elements on the page, and
2:43
that's exactly what it's doing here.
2:46
Now finally, another good use case I've
found for the not pseudo-class is for
2:48
targeting all but the first or last child
in a row of columns, or navigation links.
2:53
So it looks like we need to give our three
columns a left margin,
2:58
to create a little more separation between
the columns.
3:02
But we don't wanna give the first column
here a left margin because we want it
3:05
flush with the left margin of the page.
3:10
We don't want any space here.
3:13
Now, we can tell the browser to leave this
first column alone and
3:15
only apply the next margin to the columns
that follow it.
3:18
And we can do that by going to our style
sheet and let's create a new selector.
3:21
Let me add some space here.
3:25
This time we're gonna target the col
class, and then we're gonna say not.
3:27
And we're gonna target every call element
that's not a first child.
3:33
[BLANK_AUDIO]
3:38
And for those, we're gonna give them a
margin left value of fifteen pixels.
3:41
All right, so let's take a look.
3:47
Once we refresh the page we can see how
Columns B and C get that
3:49
roomy left margin while Column A remains
aligned with the left margin of the page.
3:54
We can see that once we highlight it.
4:00
Now, we can also do the same for the links
up top.
4:02
Let's also give them that left margin of
15 pixels.
4:04
So, to do that.
4:07
We're gonna group the selector with a new
one, so this time, let's
4:08
target the nav element, and we're gonna
target the links inside that element.
4:11
So we're gonna say a, colon, not, and
4:16
a set of parentheses, and we're gonna
target all links except the first child.
4:19
And once we save our style sheet and
refresh the page, just like our columns,
4:26
the first navigation link does not have
the left margin applied,
4:30
while the two that follow it do.
4:35
So again, a useful selector we can use
that prevents us from having to
4:38
create extra hooks in our markup and
unnecessary rules in our style sheet.
4:42
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up