CSS Tutorial For Beginners 24 - nth of Type Selectors
ฝัง
- เผยแพร่เมื่อ 19 ต.ค. 2024
- Yo my good friends, I'm here with another CSS for beginners tutorial. And in the lesson we're going to learn all about the nth-of-type pseudo classes! Nth of type classes are a great fall-back option when you just can't get nth-child to work, because they disregard elements that are not of the type you are targeting. Anyway, have fun, peace & keep coding :).
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
Good day sensei!
Could you please make a tutorial on before and after pseudo classes with some cool examples ? Also a tutorial on understanding when to use negative margin/padding would be a great additional for noobs like myself. Thank you in advance.
The nth child example doesn't make sense to me. The second child of the tag would be the first in all the articles? How do you get to the second child of the tag when there is no mention of ?
jim prucey the nth child example shown is wrong I believe. article: nth-child(2) should target the 2nd article tag and not the first one as shown. Authors please confirm?
No, because there is another child before the article, i.e. Articles So article: nth-child(2) basically means "Find me all , which are the 2nd child of something". At least that is how I understand it.
article:nth-child(2) looks for all the article tags but selects only the ones that are are the second child of the their parent regardless of whether the other children are article types or not.
article:nth-of-type(2) looks for all the article tags but selects only the ones that are are the second child of that specific article type of their parent.
if a parent has the only children of a specific type the both those pseudo selectors will give the same result.
the net ninja is right, see here: bitsofco.de/nth-child-vs-nth-of-type/
Have a nice day,
Fritz
@@snehashischattopadhyay9519 that is EXACTLY what i'm confused, in the last video (23) he gave an example targeting de first and seventh "li" by "li:nth-child(1) , li:nth-child(7)" and it got it, and now "article:nth-child(2)" got the first article??
I really wished you had used the dark theme to be honest with you... lol my eyes hurt just watching this.
GREAT videos tho. I'm learning alot.
And live server extension to save time XD my fingers are itching every time he checks the site for results :p
@@felstawad6224 That's a video uploaded back in 2015, what more do you expect? :-|
@@sayandutta4264 oh indid not c that, ty for pointing it out :)
I have watched a lot of videos,you are simply the best
Thank you so much 😀
I don't understand these ones. In the first example: If the is the parent and not the . Why not use div:nth-child(2) to select the 1st article?
+Sofia S. Hey. Div:nth-child(2) would mean grab the div element which IS the 2nd child of another element. Think of :nth-child(n) as a property of the element you attach it to. To grab a child article element of a div you could say div article:nth-child(n). This means div is the parent because it comes first in the selector. Then article, which is a child of the div because it comes after it in the selector. But not just any article within it. Just the article which is the nth child. Hope this makes sense.
Got it! Thank you so much.
As non-native english speaker, it is difficult at first to distinguish between article:nth-child(2) and div:nth-child(2). Now I understand why.
for example, article:nth-child(2) means find out all the which happens to be the second child. In other words, double yes needed for all the tags. 1) Is this tag ? AND 2) Is such a second child?
Another important thing I miss out is that itself is a parent.
@@firstnamelastname7248 I hope what you're saying is correct 'cause is the only good explanation I found. Thanks!
bitch
Why are you so underrated???
you're an inspiring teacher ❤️
Wow, thank you Hajar :)!
Thanks a lot for the explanation; even if the video is old.
what i have noticed is that the nth type is more powerful than the nth child.
Sorry if is a Noob question, but when you do the article: nth-child(2), it has to show the second article below the offers link, isn't?
no. "article:nth-child(2)" means showing the first article section which is 2nd child of "div". To show article below the offers link, use "article:nth-of-type(2)"
How to select just the p tag in the articles and not everything?
For example: “article:nth-of-type(odd) p:nth-of-type(even){…}” selects all even p elements inside of each odd article. So you basically just specifiy the selector more by making a space and select the p elements you want.
What is nth-child(-2n +3)
Antriksh Sharma if let’s say you were on term 4 n would be 4 and -2x4 would be negative 8 + 3 being making it finally -5. It really depends what term you are on the answer but as long as you follow the pattern it should work.