CSS Tutorial for Beginners - 51 - Sibling selector - Selectors Part 4 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

okay so we've been looking at all the
different types of CSS selectors in the
last several videos and we're going to
introduce a few new ones in this video
now in the last video we talked about
descendant selectors and that of course
involves moving from top down we select
a parent selector and then we select its
child selector but you can also move
side to side to side to side and that
involves using sibling selectors so
again we can move from one sibling to
another sibling to another sibling and
so those are the selectors that we're
going to cover in this video
now the first type of sibling selector
is called the adjacent sibling selector
and that's just what that sounds like
basically if we look at this div right
here the siblings in here are the h2 and
the paragraph and by the way that's the
same for the rest of these divs as well
so the h2 is the first sibling and this
paragraph element here is the second
sibling in this div right here the h2 is
the first sibling and there are two
paragraph siblings but they are all
siblings of each other so what the
adjacent sibling selector does is it
basically will select the next sibling
so if we specify this h2 element right
here
the next sibling which is this paragraph
element will be selected and so let's do
that down here I've already created some
CSS code here and we're just going to
change the color to red so what we'll do
is we'll put in the h2 element the plus
sign is used to denote an adjacent
sibling selector so that's what we use
there and then we just put the paragraph
element here and so basically what will
happen is the next sibling after the h2
element will be selected which of course
is the paragraph element this one and so
all the next paragraphs and all of these
divs should have their text changed to
read so let's go ahead and save this and
we'll refresh over here and there you
can see all the text is changed to red
now you might see this paragraph right
here you'll notice that the color did
not change to red and that is because
this paragraph this one right here is
not an adjacent sibling so that's why
the color of the text was not changed
now what if we wanted to select all of
the siblings after this h2 element so in
other words we want the color of this
paragraph to change as well and that's
where we have to use the general sibling
selector and that will basically so
fact all of the elements past this h2
sibling and we use the tilde sign for
that so let's just go ahead and switch
that to a tilde and there you can see so
all the elements now pass the h2 should
have their color changed to red so in
other words we'll just see a change
right here with this paragraph element
so let's save this will refresh this and
there you can see the text in this
paragraph is now red now there is one
other type of selector which I have not
mentioned in this series and that is the
wild-card and I'm not going to do that
here but I'll tell you that if you just
put a wild-card sign and that is I'll
just put it down below here and there
you can see it's just a wild-card so we
would put a wild-card right here that
will select every element on your
webpage I'm not going to actually show
you this because I have never used this
I haven't found a single reason to use
this yet but it would actually select
every single element on your webpage and
that's just called the wild-card
selector okay that's going to do it for
this video