Wow, you have such a talent for structuring a lesson / telling a story. Combine this with your absolute love for CSS and you'll get to the 1mln subs this year no doubt! Thanks Kevin!
Attribute selectors on ID are very useful, as they lower the specificity: [id="mainmenu"] vs #mainmenu, 0,1,0 vs 1,0,0 The former (0,1,0) is easy to overwrite with another single class (0,1,0) OR pseudo selector (0,1,0) and keeps you from fighting a specificity war if an id (1,0,0) is involved. Attribute selectors also provide means to use only parts of an attribute's value. If you're a CSS novice: Use IDs as Javascript hooks only (or use querySelector) but avoid them for general purpose styling unless you're very aware of the consequences (good and bad ones.) this has on the cascade or even want to "make a point" in your style sheet and force *some* style properties to be harder to overwrite (like many CSS Frameworks do). Whenever you find yourself using an ID selector because they're convenient or to apply simple *cosmetic styles* (colours, font) or change other inheriting properties, rethink your choice! Rather use the [id] attribute selector variance. If that's not possible find some other unique node type and attribute combinations to "identify" the element rather than slapping an id attribute on it in your html. The "nth" pseudo classes are very powerful and you can always combine them with other attribute selectors to narrow things down while keeping a sane level (0,n,m) on the selector's specificity value: element name, class name, its position within its parent or a set, the data and ARIA attributes often produce an equally unique *identity* without raising the specificity above 0,2,n or 0,3,n Happy coding.
I used to love developing and designing but these days I've lost interest on everything in my life everything is going downhill seeing u upload a tutorial gave me back the motivation I was lacking ❤ thank you
Glad I can help motivate you a bit! Sometimes when things become a grind, building out a nice, simple and small project can be a fun way to get into a little groove and remind yourself that it can be fun 😊
Oh Kevin, you larned how to pronounce specificity.....😅I just came back to your awsome videos, cause a seson job, I'm glad that you are healthy and strong, keep up the good work, I appreciate it and I've learnt a lot from you, thanks!!!
I wish there was something like an "nth-of-selector", or "nth-of-match", where we could target elements by specific selectors, rather than just the element type. Imagine the possibilities!
You could have mentioned of the other comparison operators for attributes [attr^=value] [attr|=value] [attr$=value] , maybe elude to the nuanced of [attr~=value] vs [attr*=value]
Man i love these things.. problem is, I always forget about them when I need them and and up creating a class instead :( even odd I didnt know about, nor first-of-type which would have been really useful a few times
Fun fact: the attribute selector is a way to override !important, if you inherited someone’s convoluted nightmare code and you don’t have time/resources to rewrite their entire style sheet.
Attribute selectors are also very interesting for JS purposes with document.querySelector(). You could for example use it to select all insecure links on a page with a selector like 'a[href=""]' .I think the different options would make for an interesting seperate video.
Thanks again for the great video! Is it possible to target the ::selection for options if a select input? option:: selection and select: selection doesn't work
What if I want to style an element on a specific page; say I want to style my "header" on the "index" page, but want to leave the others alone. Can I do that using one CSS document?
Thanks you a lot Kevin, for your great videos and so for your work. By the way, can you give me the name of your 'serif' font when you switch the 'font-family' at 5:00 of this video ? Thank in advance to make internet, a little bit, more ; awesome :)
It's very different and not something I have experience with. I do have an interview on my channel with an email designer though, which includes a ton of resources
@@KevinPowell yes sir this is tailwind CSS, but I want to learn these type of techniques so I can work with my own CSS and these classes... please made a video on this