CSS Tutorial for Beginners - 48 - Review and descendant selector - Selectors Part 1 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

over the next four to five videos we're
going to review selectors now of course
we've been talking about selectors
throughout this entire series so you
have a very good idea of what they are
so again these next four to five videos
will serve more as a review but also I
will be introducing some new selectors
as well as some new concepts and new
ways to think about selectors because
selectors are very very important to CSS
they are fundamental and of course we
know now that is a two-step process we
need to target the element that we want
to target that's the first step and we
do that of course through the selector
and then we need to style the content
now the first type of selector that
we've been talking about is the type
selector and this is one of the most
basic type of selectors we are just
selecting the element by type a very
simple process so we could select the h1
we could select the h2 we could select a
paragraph we would just put a P there or
we could select a div we would just put
div there again we are just selecting
the element by its type so let's go
ahead and style this and we're just
going to change the color of the text
the point of these videos is not styling
we're actually talking about this part
the selector so let's go ahead and save
this and we'll refresh our page and
there you can see we've got our blue
text now the next major selector that
we've been talking about of course is
the ID selector and that of course is
where we select the element with the
hashtag buy ID and we put that right
here and in this paragraph element we
said ID equals para 1 and remember with
the ID we usually will not be reusing
this in other elements it's usually
specific to one element that we want to
style so let's just go ahead and change
the text to green and we'll refresh our
page and there you can see we've got our
green text now the next major selector
of course is the class selector and you
will remember that we always select that
element with a dot that is how we select
it in CSS and you can see that right
here dot para and the nice thing about
this of course is we can reuse the class
over and over again in other elements
and that's what I've done here this
paragraph element is using the para
class and this paragraph element is
using the para class so we can reuse
this over many many times and all we
need to do again is use that dot so
let's go ahead and change the color
texts to orange will refresh our page
and there you can see we have our orange
text now now we can also combine
selectors so we can put multiple
selectors in one of our rule sets so
let's do that let's take let's take the
h2 and we'll put that in here and of
course we need a comma that's how we
separate when we use multiple selectors
and let's go ahead and we'll style
against the h3 and we can reuse any
other selector we want we can reuse the
ID selector so let's put that in here as
well and then what we'll do is we'll
underline the text so we'll go ahead and
refresh and there you can see the text
in the h2 and the h3 are now underlined
as well as the paragraph element with
the ID now the key again is you want to
use that comma if you don't CSS will get
confused and think you're using a
descendant selector which is what we're
going to talk about right now and the
descendant selector always selects an
element inside another element and so
that element which is inside another
element is the descendant so in this
case we have a div element and we have a
paragraph element inside that div so
this paragraph element is a descendant
of the div so keep in mind here we are
using the relationship to target this
paragraph element that is the div is
essentially an ancestor of the paragraph
element and we do that over here by
specifying div first and then the
descendant which is the P and we put no
comma there you only actually use a
space so that's how you use a descendant
selector so let's italicize the text so
let's go ahead and refresh this and
there you can see our text is now
italicized and we used a descendant
selector to target this paragraph
element so that's what all these
selectors do it's just a different way
to target these elements now the
descendant selector has a selector
that's very similar to it it's called
the child selector and that is what
we're going to talk about in the next
video we're actually going to introduce
a new selector it's called the child
selector and I'll talk about the
differences between the two in the next
video see you guys