HTML5 and CSS3 beginner tutorial 22 - Pseudo Classes

This tutorial shows you how to use Psuedo classes.

Don't forget to tell them I sent you.

Here's a list of Pseudo classes:

Patrons can download the code for $1.00 here:

Follow me on social media:

Become a Patron:

Subscribe to my Vlog channel:

Subscribe to this channel:

Please note:
I do not offer web development services, private tutoring, or "assistance" on school or university projects. I am not an online support service, and I'm not interested in setting up a "start up" business with viewers.

[georgelee]

Amazing tutorial!

According to the definition of :nth-child(n) selector on w3schools: "The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent", it would explain that why :nth-child(2) styled the 1st <p> element in your demo, because the 1st child of <p> elements' parent is the <a> element, the 2nd child is the 1st <p> element.

[NiohNiohYT]

Fun fact: 13:10 you don't need to make a class, just adding div will fix the problem where <a> was acting like a paragraph and counted when you used p:nth-child. Just putting paragraphs in div without any further adding of class and saying it in CSS file will fix the problem

[ricardohu]

Probably the best tutorial, even for people whose first language is not English (but with some basic knowledge of English). It´s amazing! Thanks a lot Quentin!

[gurshmindersingh]

hey quentin you are the best tutor I have ever seen at youtube..

[jinhe]

thanks, Quentin Watt, you are really a great teacher, I'm going to do my capstone design in this Fall semester for my final stage of undergraduate study, your tutorials give me lots of encourages.

[EDPhoto]

Got some more Troubleshooting!! :-) Other than pseudo classes, the biggest thing I got was that if you are having problems with the way the styling is turning out...try isolating it with a DIV! Loving it!

[divineforever]

man important about u is u know exactly how to teach and what to teach, ,u are much better than udemy man.

[HassanBraim]

I like the magic spontaneous way of making codes talk !!!

[marcusferreira]

thank you Quentin for your great tutorial, in my native language "portuguese" we don't have a quality course like this one available.

[Jeff]

This series is <strong>really</strong> terrific! Quentin is great. Every question about CSS I ever had is being answered one by one. I looked at Patreon in order to make a donation but I'd like to do so a single time only, size of my choosing. Is there a way to do so. I only see monthly.

[davidmacfarlane]

i also seem to be having trouble getting sublime to recognize p:hover syntax... great tutorials though Quentin - thank you very much!

[Sam_]

are you going to revise the javascript as well

[racerx]

dev mountain no classes from home. you have to go in person :( otherwise i'd do it in heartbeat. 12 weeks is a long time to go without a paycheck

[stepkurniawan]

the nth-child pseudo class, does it start with 0?

[Gogies]

Its kind of frustrating to follow when the initial syntax with hover works in your sublime and for the rest of following your tutorial even if they follow through word per word, syntax per syntax and it just WONT work.why is it that on your sublime hover is recognized and not on sublime of 2017?

[SuperFireEagle]

I have the same exact code on my notepd and when I run it I do not see the nth-child effect being applied ... running it on chrome and fox and still nothing...
any tips?

[abhijitdey]

Sir, is there any difference between a and a : link? Can I use any one of them?

[compligamerzizo]

:active syntax isn't working for me :(

[sladjanadragic]

:visited syntax is not working at me, all the oter is ok but that one is not for some reason

[ForsakenXennial]

sublime's not recognizing my :hover syntax 😩