CSS Tutorial For Beginners 23 - nth Child Selectors

Yo ninjas, once again! I'm here with another CSS tutorial for beginners, and this time we're going to be getting familiar with the nth-child pseudo classes. They are you new best friend, trust me. If there's one structural pseudo class you should master, it's this one! Nth-child selectors help us target any child of a parent element based on it's position within the HTML structure. It is an awesome technique, and one that I hope you will enjoy using on your own projects. Stay cool, keep coding & peace, my friends :).
SUBSCRIBE TO CHANNEL - / @netninja
========== CSS for Beginners Playlist ==========
• CSS Tutorials For Begi...
========== HTML Basics Course ==========
• HTML Tutorials For Beg...
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
========== Social Links ==========
Twitter - @TheNetNinja - / thenetninjauk

[@ghaith99000]

I was reading the documentation and I couldn't understand nth-child(an+b). I didn't understand what (an+b) mean, but I understood what does it mean after watching this video. Thanks sir. This is really helpful keep going

[@joshkevin9193]

I followed your recommendation I've practiced it for a couple of days thanks a lot for saving people's lives may god bless you and become the best channel for learning code keep it up, Ninja

[@noelvega6059]

your videos are awesome bro. These intros always put a smile on my face. Heeeeeeyah!

[@moonsdonut5188]

um sensei i was lost on the whole nth child thing i came here for some wisdom

[@Jody-nf2bz]

I was going to rate this "down" because of the loud screams, but his explanation is actually Excellent! Thank you so much!

[@NetNinja]

Aha, thank you Jo! Glad I was able to win you around :)

[@Arjunvandemataram]

Great tutorial bro. Just want to mention the ninja scream at the start of the video scared me like hell spilling coffee all over my desk , not aware my volume was a tad high 😂 But love the ninja screams during the tutorial, keeps making me laugh 😁

[@sohupba7122]

Your Tutorial is great, thanks buddy

[@gregorysaveliev9449]

Shaun, thank you for your effort, it appears your way of presenting things is the only one that can reach my consciousness. I have a logical problem. You draw your simple set of tags showing which are parent, which are children. In #21 video (~3:46), you select article p:first-child, where article is a parent and p is a child of article. In this video, you select li:nth-child(1). Problem is li does not have children, while ul does, that is ul li:nth-child(1) would look more logical. Am I missing something or CSS is logically inconsistent and must be accepted as such?

[@Ziad-Al]

I tried both ways and they worked both just fine, it seems that you can use ul li:nth-child(1) or li:nth-child(1) and both will give the same result, i guess it is matter of specifity "the word which Shaun hates :)))""

[@Ziad-Al]

the logic behind it is that li:nth-child(1) means we select the first li , and it is identified as a child of the ul here, it doesnt mean that it selects the first child of the li itself. in video#21 the p:first-child means the first p inside the .

[@bilalhussain7057]

One year too late, but for anyone else watching I believe this is the answer. The full version you've written i.e. ul li:nth-child(1) is correct. The ul in the command would be necessary if there was another set of lists which we did not want to target. e.g. if there was a set of lists under i.e. ordered lists if we write: li:nth-child(1) ...then this will target the first child of both lists ul li:nth-child(1) ...this will target the first child of only the ul list (and not the list) I believe shaun is showing us the command without the mentioned simply because there is no other list and is therefore unnecessary Personally I am writing the command with the ul mentioned at the moment so I keep to the same format mentioned in previous videos

[@bruhmoment3731]

So helpful!

[@sharoffhaashim4488]

Thank you very much. I was really confused about that formulae.😂🔥

[@ahmedrazaattari12]

Jazak Allah I learned more about nth selector.

[@Khan_2025]

waw ，good job

[@jonathanperera5263]

A nice manly list 😅- 4:13

[@4tsdesigns809]

so I have a javascript slider with li:nth-child(1) and li:nth-child(2). in a tutorial it says to adjust the destinations of the arrows I am utilizing to go to previous and next images in the slide. One goes on the left and one on the right side of the slider to cycle, to move these arrows I have to say: li:nth-child(1){ position: absolute; top: 275px; left: 7px; } li:nth-child(2){ position:absolute; top:275px; left:1462px; } Why doesn't it work when I want to float left or right, or call margin-right or margin-left? it makes my webpage have a lost right arrow while everything else is responsive and shrinks down to whatever size i drag the window down to

[@onepointperspective]

hi!! thx u for the explanation, i understand it better now. also, say i have a div of class container and 6 div elements inside this container. what will the syntax .container > div:nth-child(1n) { } mean? i saw this syntax somewhere but i still can't seem to understand what the > sign mean or do in this case. thanks!

[@DamianSzajnowski]

> means elements inside the container will inherit the attribute, he talked about it a few videos before in the playlist, I believe 15 Descendant Selectors or near there

[@alainsaleh39]

What if you want n=1, not zero?

[@tn9753]

On the CSS file, what is the symbol in front of "li"?

[@dafabulousdude8541]

so you're telling me n in CSS starts at 0 even though the first item in an HTML list has the index 1?!

[@lahiruprabhanga8822]

Yo your kung-fu guy scares the fucking shit out of me bro. Could u turn him a little down...🤣🤣

[@prafulrane3591]

What should I do next Can you make a pathway video to know how should we follow your playlist from your channel for every technology covered on your channel?

[@captain_finn]

What if your li tag has a nested a tag. How would I target the tag with the nth child? I have tried: li a:nth-child(3) and it doesnt seem to work.

[@SCIFIVAMPIRE]

If it's selecting child selectors why does it target the UL:nth-child?

[@cforge2411]

then it would be ul li : nth child does that make sense?

[@nightly_builds]

add an item > blue screen of death

[@Martin958]

Why do ID's and classes make things unsemantic?

[@SquatandCode]

Which editor you are using?

[@sairajdas6692]

brackets

[@neolopus]

Math and codes.... WAAAAAAAAAAAAAAAAA

[@neolopus]

i am not even drunk

[@mitchtheguy6789]

How's your web dev career going

[@giobatsiashvili1390]

Thanks bro.

[@joshrochon6243]

HI Shaun, are you aware of any logical explanation as to the indexing method here? In JS we've learned that the first element of a list would be index 0, which makes sense really given how computers function behind the scenes. And now suddenly however here comes the nth child selector, telling us the first element is in index 1? A bit confused if I'm honest

[@NetNinja]

Hey, yeah, it's a bit confusing. In lower-level programming languages (e.g. C) an array is a pointer to memory. myArray[0] refers to first item in the index, and anything after (e.g. myArray[n]) refers to the first + n item of the array. So 'n' is like an offset value from the first position. Higher level languages such as JS have just picked up this notation or 0-based index. My guess is that because CSS wasn't designed to do this - it doesn't point to memory - then it was made more human readable. When talking about children it makes no sense to have a 0th child. But it's an area open to debate :)

[@joshrochon6243]

I see so, so JS has simply adopted this notation found in lower level languages even though it doesn't necessarily need to function as it does, while css has not adopted the notation, in an attempt to be more human readable/understandable maybe, not sure. But either way, thanks for the explanation. Understood. And yeah 0th child sounds really, well dumb haha, so if anything else, there is that aspect

[@avantgurlnyc]

"Bracket" is not synonymous with "Parenthese."

[@prafulrane3591]

Anyone in 2023

[@billgates5466]

what the hell are u even telling about

[@Sri-wg3ne]

@@blank-vw2sb Tone down your arrogance. Not everyone's a pro like you.

[@snake_DOC123]

hhhwaaaaaaaaa