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.com/prof3ssorSt3v...

[@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!!!

[@debhasish]

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

[@dotterel]

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

[@thetowerfantasymusic]

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

[@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

[@alexanderkorotkoff2639]

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

[@CK-ne5hp]

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

[@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

[@kierangarvey6303]

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

[@shivaEEE]

Finally peace after searching lots of videos 🥹👐

[@thenishantgiri]

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

[@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

[@rupambhattacharyya780]

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

[@darkpixie34]

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

[@zeusifyhosting8042]

Beautifully detailed tutorial!

[@MrDiabeu]

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

[@ikechukwualita521]

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

[@dante2047]

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

[@nageswarkv]

Very good explanation without any fluff!!

[@emanuelrouse7076]

Very simple explanation of specificity. Thanks.

[@adriant2533]

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

[@andriykupinskyy4700]

Best explanation I found. Thank you!

[@vigneshwarm]

This is the best explanation in the entire youtube!

[@koul_2482]

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

[@mohamed.alesawii]

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

[@samirsamir7779]

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

[@2primateswalkintoabar61]

Well articulated. Much obliged.

[@sane4959]

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

[@feis._.]

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

[@abdelrahman5094]

your explanation is extremely clear and helpful thank you

[@SteveGriffith-Prof3ssorSt3v3]

Thanks

[@juanreyes5238]

Great explanation man, how great

[@ramyhaaselvaraj9243]

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

[@petersorger5231]

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

[@Mado44555]

easy and direct to the point

[@mortenlund1418]

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

[@andriskatkovskis5758]

clear and brilliant !

[@igorr4682]

nice and clear, good job

[@michealowen8144]

Thank You for the explanation

[@johnavernia1026]

This is such a good video.

[@SachinYadav-zp8ud]

great explanation :)

[@nirmalmaharjan1748]

thanks .Great Explanation!!!!!

[@mdarif2835]

Thank you so much sir, you explain very well.

[@koul_2482]

thank you for the information!

[@taylorb2783]

so helpful.. Thanks!

[@raavi2945]

Thanks Steve

[@asfandyar_ali]

Excellent thank you...

[@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

[@yapchenpo95]

Perfect!

[@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!

[@vedinak7360]

Thank you!

[@xXSolidxXSn4k3xX]

wow too good sir

[@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.

[@malekalshemali1125]

unbelievable!

[@yomama847]

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

[@BezzantSam]

Respect for the trailer park boys reference

[@BezzantSam]

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

[@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.

[@wuersen]

Amazing video 0:11

[@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.

[@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.

[@beenmicrophone5817]

fred ricky bubbles and julian. hahaha amazing

[@anurajms]

ty

[@kushalshukla1323]

now i'm feel better

[@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

[@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

[@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 :)

[@jetspray3]

The avatar for deadpool is not on your github.

[@SteveGriffith-Prof3ssorSt3v3]

Nope.

[@silvo9460]

@6:36 hahaa trailer park boys??

[@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

[@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 :)

[@suneelvarma4821]

He hates Bobby.

[@tomwilliamson3637]

Trailer Park CSS lol

[@yarik83men51]

+++

[@nicolaregiacorte8328]

Thank you!