CSS Tutorial for Beginners - 54 - not Selector - Selectors Part 7 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to go over the
knot selector that they added in css3
and I find this a very very useful
selector because you can make math
changes to a lot of different elements
and you can exclude particular elements
that you don't want to have affected by
that change so again it's very very
useful so we're going to do a working
example in this video now you can see
here I've added an h2 and h3 and then
again the paragraphs so we've got three
different types of elements here in h2
element and h3 element and a paragraph
element now the paragraphs let's go
ahead and change the color of that so
we'll just go ahead and use the type
selector P and let's go ahead and just
change the color of the text to red and
let's just go ahead and make sure that
went down okay let's go ahead and
refresh our page and it did now what we
want to do here is change all of the
rest of the elements in our page to a
different color specifically we want to
change all the h2 and the h3 elements
and let's just say we want to change the
color to dark green but we don't want to
have our paragraphs affected by that
change we want the color of this to
remain red and that is where the not
selector comes into play now the not
selector is a pseudo selector so you
will remember we need a colon for that
and then we just use the keyword not now
here is where the parentheses go and
here is where we put in the selector now
notice I said selector not element so we
pick a selector from our style sheet
that we want to exclude and in this case
it's going to be the P selector so let's
go ahead and put in P there and then of
course we need a curly brace and as I
said let's just go ahead and change the
color to dark green and we're good to go
so let's go ahead and refresh our page
and there you can see it worked the h2
the h3 elements all change to dark green
but our exclusion worked all of our
paragraphs were not affected and again
you can see how useful this is we didn't
actually even have to create CSS rules
for our h2 and h3 it just made a mass
change and allowed us to exclude all of
our paragraphs now remember I said this
is a selector that we have to use from
our stylesheet if I get rid of this rule
watch what happens
I want you to pay attention to this so
let's go ahead and save this and look
everything switched to green why is that
because when the browser read in this
stylesheet it didn't find the paragraph
selector so there was really nothing to
exclude here so it just went ahead and
changed all the elements that contained
text on our web page to dark green so
that can be somewhat confusing so just
remember you have to have a selector in
here for this to actually work so let's
go ahead and just copy and paste this
back in let's refresh our page and
everything's back to normal so that's
how the knot selector works I think it's
a very very useful selector and I will
see you guys in the next video thank you