Combining and Chaining CSS Selectors

Did you know that you could add multiple CSS class names to any element?
Did you know that there is a way that you can specifically target elements that have multiple CSS classes?
Did you know that you could combine element names, class names, and ids to create better targeting for your styles?
Code GIST: gist.github.co...

[@Oliver-Nash]

You are the Bob Ross of CSS and HTML. Beautifully done.

[@FelipeGanash]

This is sooo true! Thanks for the video

[@wuersen]

Soooo true!!!

[@thenishantgiri]

I have watched many videos of yours sir, Helped a-lot! Keep spreading your knowledge sir. Love from Nepal 🇳🇵

[@shady7117]

I've been up all night coding and completely forgot how to style a specific tag!! Thank God for you Steve man. Saved my life

[@zeusifyhosting8042]

Beautifully detailed tutorial!

[@dotterel]

Dude, this is such an amazing teaching style. 10/10, would recommend.

[@rupambhattacharyya780]

awesome explanation...!!!!! i was searching for this tutorial in youtube and you explained fabulously

[@ikechukwualita521]

Have been looking for this for long. Thanks for the idea

[@debhasish]

You have basically broken my 5 years of misconception on CSS chaining. I am very lucky to have this video Great Job :) 👍

[@andriykupinskyy4700]

Best explanation I found. Thank you!

[@shivaEEE]

Finally peace after searching lots of videos 🥹👐

[@alexanderkorotkoff2639]

Thank you Steve, it is explained in a very simple and understandable way!

[@Hydrogenpipes]

Hey Steve, actually I did not get to target the element I wanted, but I will see this video couple more times to get it under my skin. Also because clearness of your voice, man.. I can just listen to that all day. :) Thanks

[@koul_2482]

thank you!! I was confused in class but this video cleared it up!

[@thetowerfantasymusic]

Calm and clear explanations, best i've seen. Subbed

[@kierangarvey6303]

Love your teaching style. Subscribed and look forward to watching many more.

[@samirsamir7779]

this is what I call : THE PEDAGOGIC EXPLANATIONS ! thanks ;)

[@2primateswalkintoabar61]

Well articulated. Much obliged.

[@hashirkhattak9180]

This is an absolute treasure... Like a million dollars video... Damn man you got some serious skills to deliver the knowledge.. 🔥 lots of respect.. Subscribed and liked

[@Mado44555]

easy and direct to the point

[@raavi2945]

Thanks Steve

[@nageswarkv]

Very good explanation without any fluff!!

[@feis._.]

Thank you SO MUCH, now I can understand a lot more!

[@darkpixie34]

Such a great explanation! Thank you! :) Very, very helpful and straightforward.

[@CK-ne5hp]

Well explained! I always mix up the different rules and exceptions. Thanks for explaining it so calmly!

[@dante2047]

Thank you so much for your video on combining css. I’ve been struggling for too long.

[@andriskatkovskis5758]

clear and brilliant !

[@emanuelrouse7076]

Very simple explanation of specificity. Thanks.

[@vigneshwarm]

This is the best explanation in the entire youtube!

[@sane4959]

I don't know why your voice is just so relaxing! 😅😂

[@michealowen8144]

Thank You for the explanation

[@adriant2533]

Superb explanation....very clear, concise....so much here in so little time--- would take most much longer to convey. Great!

[@BezzantSam]

Respect for the trailer park boys reference

[@BezzantSam]

I met ricky and bubbles in 2010 in Portland I was so stoked

[@MrDiabeu]

excellent tutorial! you've got no idea how much it helped me. thank you!

[@johnavernia1026]

This is such a good video.

[@nirmalmaharjan1748]

thanks .Great Explanation!!!!!

[@yomama847]

Never thought someone in software could appreciate The Trailer Park Boys like me.... You have proved me wrong! haha... great vid!

[@koul_2482]

thank you for the information!

[@mohamed.alesawii]

Really thanks alot i appreciate your great point of view in teaching the "css chaining" may god bless you ☺

[@petersorger5231]

great, this is what I needed to hear. Nice.

[@mortenlund1418]

ok nice video - you have complete control over this chapter - thanks.

[@cferdinandi]

I really appreciate the use of rebeccapurple for a color value. ❤️

[@SteveGriffith-Prof3ssorSt3v3]

I love the fact that they did that for Eric.

[@cferdinandi]

@@SteveGriffith-Prof3ssorSt3v3 Same here!

[@abdelrahman5094]

your explanation is extremely clear and helpful thank you

[@SteveGriffith-Prof3ssorSt3v3]

Thanks

[@taylorb2783]

so helpful.. Thanks!

[@wuersen]

Amazing video 0:11

[@asfandyar_ali]

Excellent thank you...

[@vedinak7360]

Thank you!

[@yapchenpo95]

Perfect!

[@nft-discovery]

Hello @steve griffith - Prof3ssorSt3v3, have you ever encountered a syntax problem error on VS Code with CSS element inside a CSS element as this : .card[data-state="#about"] { height: 450px; .card-main { padding-top: 0; } } the ".card-main" isn't recognized as an element class and I don't know what to do

[@SteveGriffith-Prof3ssorSt3v3]

You can't nest selectors inside other selectors in css.

[@igorr4682]

nice and clear, good job

[@ramyhaaselvaraj9243]

Great video .... Thanks a lot .. Appreciating ur work

[@juanreyes5238]

Great explanation man, how great

[@malekalshemali1125]

unbelievable!

[@mdarif2835]

Thank you so much sir, you explain very well.

[@anurajms]

ty

[@westfield90]

Thank you so much. Always explained so well. What does it mean when you see the > symbol

[@SteveGriffith-Prof3ssorSt3v3]

That is the child selector. p > a { } means apply the style to anchors but only if they are direct children of a paragraph.

[@rahmaadel2546]

I have a question about last selector , in p img I don't see any change by these selector in the image

[@SteveGriffith-Prof3ssorSt3v3]

You would have to put some CSS inside the curly braces that you could see with an image. Something like border: 10px solid red; would show up.

[@farhadcohan8867]

👍 Steve can you explain differences on last part video #simon img and img , why do we needed to use id to style can just use img tag alone thank you

[@SteveGriffith-Prof3ssorSt3v3]

img { } will apply to all images that are ever placed on the page. #simon img { } applies only to images that are inside an element with the id "simon". It is all about being more specific. Be as specific as you have to without creating really long selectors. html body main section p img#bob - targets an image with the id bob, if it is inside a paragraph, which is inside a section, which is inside a main, which is in the body, which is inside the html. It works. It is accurate. But really long and it would be slower to process. Instead just use img#bob or even #bob. Same element. Just as specific. Faster processing.

[@SachinYadav-zp8ud]

great explanation :)

[@beenmicrophone5817]

fred ricky bubbles and julian. hahaha amazing

[@talkliberia812]

I’m really having difficulty with styling in css. Most often my style will not take effect. Some will but not all

[@SteveGriffith-Prof3ssorSt3v3]

Most likely your problem is with specificity of your selectors - kzbin.info/www/bejne/gavChGeEoJmkr6s

[@kushalshukla1323]

now i'm feel better

[@cathaldolan7113]

Hi Steve, I love your tutorials, they are really helpful. Thanks for taking the time out to do them. I have a query on this one. @7:41 you list out three classes with spaces between them. This doesn't have the desired affect. While you explain what is happening there, I don't understand why it doesn't work. Is it because the three classes are all on the same line and not nested in a parent/child relationship? The same principal I think applies at 10:20 where there is no space between the tag and the ID, and I'm wondering if this too is because they are on the same line. Thanks.

[@SteveGriffith-Prof3ssorSt3v3]

If there is no space between two parts of the selector it means the same HTML element has to have both. Eg: #main.active would refer to something in the HTML like this .one.two.three means an HTML element like this

[@SP-iv2jj]

I love Canadians!

[@AK-my9sb]

if classes and ids are important then why are they being applied after the html tags? also, what does that even mean?

[@SteveGriffith-Prof3ssorSt3v3]

CSS Specificity - kzbin.info/www/bejne/gavChGeEoJmkr6s

[@xXSolidxXSn4k3xX]

wow too good sir

[@jetspray3]

The avatar for deadpool is not on your github.

[@SteveGriffith-Prof3ssorSt3v3]

Nope.

[@m.dvenkatesh7718]

css compile from top to bottom ,second one will always override the first i guess ? but why it is not in the case body h1 colour is not changed to red?

[@SteveGriffith-Prof3ssorSt3v3]

Top to bottom only matters if they have the same specificity. Specificity is the primary decider. kzbin.info/www/bejne/gavChGeEoJmkr6s

[@m.dvenkatesh7718]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for Ur Quick Response and video clarifies my doubt :)

[@ladylinkon3916]

"tag#id.class tag" doesn't work for me. How to make it work?

[@SteveGriffith-Prof3ssorSt3v3]

Not sure what you have mistyped, but it will work. Here is an example codepen.io/mad-d/pen/MWKBwrZ

[@ladylinkon3916]

@@SteveGriffith-Prof3ssorSt3v3 Oh thanks, I just understood what the problem was. Thank you :)

[@ecerejo]

Where is the CSS for the main.css file?

[@SteveGriffith-Prof3ssorSt3v3]

It doesnt exist. The css for the tutorial is in the style element.

[@ecerejo]

@@SteveGriffith-Prof3ssorSt3v3 Just asking because I see the link to it in your video.

[@SteveGriffith-Prof3ssorSt3v3]

@@ecerejo I used to have my template starter page set up to include that link

[@silvo9460]

@6:36 hahaa trailer park boys??

[@suneelvarma4821]

He hates Bobby.

[@tomwilliamson3637]

Trailer Park CSS lol

[@yarik83men51]

+++

[@nicolaregiacorte8328]

Thank you!