CSS Basics (Part5) — Advanced Selectors

Today we look at some advanced selectors.

A lot of what we cover is building upon the previous two videos where we discus basic selectors, and then properties and values. If you need too, check those out now:

=========================
Basic Selectors

tag | a
class | .container
id | #main-list

========================
Selector stacking

a, strong {
color: red;
}

========================
All Selector

* {
margin: 0;
}

========================
Descendant Selector

li a {
color: red;
}

li li a {
color: red;
}

========================
Direct Descendant Selector

( youtube doesn't allow brackets in the description. )

.container (greater-than) ul {
border: 4px solid red;
}

========================
Adjacent Selector

ul + p {
color: red;
}

========================
Sibling Combinator

ul ~ p {
color: red;
}

========================
Pseudo Classes

a:hover { text-decoration: none; }
textarea:focus {border-color: blue}

========================
Put it together...

.peeka:hover + .boo {
display: block;
}

========================
nth selector

p:first-child
p:last-of-type
p:nth-child(3)
p:nth-child(odd)
p:nth-child(3n)

YAY!!!!!

[RAWKNtoni]

Dude. I've learned more about basic html and css selectors from this video and others than in my so-called web design certificate program. Thanks for these video Travis!

[JustinBrooke]

SRSLY... Best. CSS. Video. On. Youtubes.

[ce]

Thank you! I just started a full stack tech school with NO previous coding experience whatsoever and hearing what I need to learn explained differently is a great help!

[mdshahbazali]

One of the best videos I have watched for css selector.. I'm not a developer but a UI automation tester . I'm gonna use it to select elements using selenium. Thanks a lot.

[TheHiphopmasters]

I'm literally taking notes. I've never done that before, especially while watching a youtube video. Thanks man:)

[CSryandm]

I didn't know you could do so much with CSS! Forget javascript for now, I need to master CSS!

[jwdwsn]

That peeka boo trick has changed the way I look at web development. Everything else on here was extremely helpful as well. Great video. Thanks.

[extasyGH]

wooow... really followed all your tips and tutorials on web designing and i cant thank you enough.

you are awesome at making detailed descriptions in the shortest duration possible

[daviddaedae]

Dude you're such a good teacher. Your entertaining which sets you apart from those boring tutorials. You're also explaining everything perfectly. 

[warkentien]

I don't know how it escaped my knowledge for so long, but I just found out about adjacent selectors. I always solved my advanced hover stuff with nested.
Thanks man!

[Nomadvicky]

Thanks this is the thing i am looking over the decades these pseudo you cleared my hurdle.... thanks a

[spikedavis]

Great video. Learned several things about CSS that I did not learn in a web develop class I recent completed. Thanks Travis.

[TheChoofamily]

Just a little bit of a refresher for me. Clear and easy to watch :). Nice job.

[ouadieelamrani]

I've always found dev videos boring and made me want to sleep, you made it fun to learn, thanks for the video

[vero.valencia]

I love that your teaching way. It is the easiest and the funnest SR.!!

[ragonswife]

my mind is blown! Phenomenal - you do a amazing job explaining!

[milfordpryce]

Finally a video on selocters worth liking

[ESatUCSC]

WOW! these video series are SO HELPFUL, thank you! Really tied together many many loose ends!

[loxy]

Where have u been all my life? This video is much appreciated. You've opend my eyes to the wonderful wold of pseudo-selectors....Thanks a lot and Keep up the good work! :)

[shakt]

A lot of these comments already said it all but here's more fuzzies for you. Kudos! great vid! well explained!!! Not just this video but others also. Thanks for sharing your knowledge