CSS Tutorial for Beginners - 53 - nth child Selector - Selectors Part 6 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

we are going to look at the enth child
selector in this video now the end child
selector is a type of pseudo selector
you will remember a while ago we talked
about the hover effect and that is also
a type of pseudo selector and so is the
nth child selector now every pseudo
selector starts out with a colon and so
the enth starts out with a colon as well
which again identifies it as a pseudo
selector now we use the nth child for
pattern selections so maybe you want to
select every even or odd numbered
element and that's what we are going to
start out first with selecting odd or
even numbered elements so you can see
here I've created all of these
paragraphs because I want a lot of
paragraphs to establish pattern and
right here we're going to select our div
which of course is as an ID of right so
we'll select that and then we'll point
to our paragraphs that's what we want to
target so all of our paragraphs inside
of our right div and then of course we
use the colon right here and this kicks
off our pseudo selector and here of
course we put nth child
now we put arguments into these open
parentheses right here so the first
thing we want to do is select all of the
even-numbered elements so all you do is
just use the keyword even very simple so
let's just go ahead and save this and so
now if this works all the even-numbered
elements should be selected so let's
refresh our page and you can see they
are so we have the second one the fourth
one the sixth the eighth and so on now
the opposite is the odd keyword and you
guessed it that will do all of the odd
numbered paragraph elements so let's
refresh our page and there you can see
now we start out with the first because
that is an odd number three five and so
on now you can also just put a straight
number in here let's say you just wanted
to select a third element well you can
do that and we'll go ahead and refresh
our page and there you can see you get
just the third element selected but
that's not a pattern is it so if you
want that to be a pattern you put the
letter and after it and that will tell
it to create a pattern so if we refresh
our page there you can see now we get
every third element selected now what if
we wanted to do a little bit more of a
complicated pattern we can do that by
adding a plus sign and what you can do
here is you can
started out at a specific point so let's
say we still want to go ahead and repeat
this every three but we want to start it
out at a very specific point so again
you put in the plus sign and then you
put in where you want this to start out
at so let's say we want to start out at
the fourth position instead of the third
position and then after that we want to
repeat three again so we'll put in four
right here and we'll go ahead and save
this so once again if this works we'll
start out at the fourth paragraph
element and then we'll repeat every
three elements so let's refresh our page
and there you can see it did it look we
started out at the fourth paragraph this
time and then we repeated every three
let's go ahead and switch this to two
now see what happens now it should be
every two paragraphs after we start out
with the fourth paragraph so let's
refresh this whoops
I did that wrong not 32 - okay that's
why I didn't say anything let's go ahead
and refresh this and there you can see
we select every second paragraph after
starting out with the fourth paragraph
so that's how the enth selector works I
will see you guys in the next video