Kevin, kudos…another super useful video. I always look to CSS as the easiest, most bulletproof way to just get things done. For anyone who has been doing this longer than 5 years it’s great to see CSS easily solve problems that used to take hours of javascript faffing to do.
Here's a contribution to this idea from a newbie. I once wrote a load of js to manage clicks on an animation of a timer wheel which would trigger a new image from the server. I got rid of it all and instead made the click end the animation and then attach a listener to an animationiteration to trigger the new image download. No js timing needed!
Pseudo selectors can also be combined: p:only-of-type:not(:only-child) for the single paragraph with the image, or the other way around: img:first-child + p:only-of-type to ignore the one with multiple paragraphs, again use :not() to reverse the logic.
I like the :target selector and I think a nice way to implement it would be to have an animation tied to it. Example would be to highlight in a way but fade it out after 1s.
Hi Kevin, started watching your videos recently and there is lots of intresting stuff here. One request, could you cover some 'practical' topics in depth at some point? Perhaps your best practices for starting a new Bootstrap site with the current version? (seen the old series you did.) Or talk about an overview of how your organise your CSS and why? What is the best way to arrange CSS to make best use of cascading? In other words, taking the things you have shown from your more ' flashy' videos and showing how to apply the knowledge to a typical real world project. Thanks.
Just learned about _:empty_ a month ago when a markup script generated empty (p)aragraphs for row-breaks. Just thought "wonder if CSS has a solution for this". Will use _:target_ in the future. Learned something new there.
In the target selector add an animation that just changes the brightness filter for a bit to highlight the target element instead of a red outline which I use all the time,it's easy to write, easy to use and very effective.
I've watched a few of your videos before and I was like, yeah okay you have some good tips. But you sir, have earned yourself a sub and a like after these nifty little tricks. Very well done!
No, it's just a visual separator, picked it up from using CUBE CSS. It's technically a class that's just not doing anything at all. Might even be an invalid one, but it doesn't cause any problems.
Hi mate, thanks for the tutorial! I was wondering if it is possible to remove the styles for the " :target " element for like after a few seconds or even based on an event. Thanks!
Hi Kevin, nice video. The features you mention are useful. I do have a question, -not directly related to this content- I hope you can either suggest a solution, or point to a video you have previously made. That is, if I want to 'highlight' a navigation item / tab, that is currently being displayed e.g. this page, how can I do this using only CSS? Thanks
You need a class that changes the styling, and apply to to the link for that page. There is nothing in CSS that can know what page is actually the active one
Nice video Kevin! I am wondering is it possible for built in css to handle click outside alerter for multiple mapped elements? Let’s say when we clicked outside of each element, the corresponding clicked element dissapear. I currently implement it with Javascript but it would be interesting if css can handle this too :)
I've been in need of the :target pseudo class for a frontend mentor project for a whole month and something 😂 I thought I only have to use JavaScript 🤣
So at like 8:18 when you're explaining the :not(:only-of-type), I see why this is really useful, but wouldn't just giving the element a specific class be better? I know that it is generally best to stay away from complex selectors, so I was just wondering if you would normally prefer a class over doing this.
Very helpful I'll use. but Is there any way to set different margin or other attributes for p tag (paragraph) if 2 p is continuous like demo para 1 demo para 2
How the youtube and wikipedia has elements when they can't fit in to screen the position themselves top -215px and when there's enough space at the bottom the have top 200px like youtube has on the edit comment is through the use of intersection observer api and am i right api means functions, objects of a library and urls on web
My guess would be intersection observers, yes. In this case, the API is a bit different because it's one the browser uses, not an API you'd use to pull stuff from a server or whatever.
I'm working with CSS since early 2000 and I noticed that I tend not to know about new features of it. I'm just using the same thing as part of a habit, knowing that it works... You should always learn continuously! Don't make oldfags mistakes! :D
Suddenly comments have popped up about your welcoming introduction "front end friends". Up until your previous upload I always thought you were saying "friend and friends" as in to welcome the viewer personally and then everybody else 😂
Yes I thought he was saying "friend and friends" when I first started watching his videos; just thought it was part of him being super nice. I hear "front-end friends" clearly now though.
Hi Kevin. Could you do a video on why it’s still important to know pure CSS when we have Bootstrap and WordPress? By the way, I love CSS and have watched practically all of your videos. I’m currently a national qualifier in Website Design and Development for a prestigious event called “WorldSkills”, here in the UK and your videos have been essential for my preparation for it. Thank you! Kind regards, George
Well, unless you want your site to look like every other Bootstrap site, understanding CSS makes it a lot easier to work with and customize Bootstrap. I'd also say knowing CSS just makes you use Boostrap much better as well... plus while Bootstrap is popular, it's not *that* popular, and probably fading within the job market as well for other solutions. Knowing the base language makes it a lot easier to pivot and adapt as the landscape changes :) Also, good luck with the WorldSkills competition! I was a mentor a couple of times for those when I was still working at a school :)
@@KevinPowell Wow! Thanks for so quickly responding! Ah really good answer! Thank you! Totally agree! And thanks so much! That means so much coming from the King of CSS!
I wonder if I should actually use :empty... Sounds like it would leave a bunch of hidden HTML in the DOM. I should probably just continue not including it, whether on the server or on the client.
About :target, wouldn't it mess with keyboard navigation? I used that property in the past for visually show the keyboard navigation. But other than that, I don't know much about it. I wish I knew about :empty in the past, I have spent so many hours hiding error messages and flash messages.
It shouldn't have any impact on keyboard navigation? It's just a visual clue for what's been targetted... you just wouldn't want to use the same style for :outline as you would for :target because then that would get annoying
Kevin I'm currently learning Web design but after learning css I've become obssesed with it. You think it's better to become very good at css before jumping to Javascript or i should start now ?
I guess it depends on how far along you are, but once you feel like you're getting comfortable with CSS, even if you're not "very good" yet, I'd probably start sprinkling in some JS
Hey Kevin! Love your content! but I'm really a dumb on responsive side :D May you make a clone project that focus on responsive side, such as cards, nav... thank you!
I like those profile pictures of Jane and John in the first segment on :empty. How many times did you have to refresh the page to get such good results? 😉
Greetings, awesome content. Would you happen to know of a good web form validation script that increases accessibility by enabling screen readers to announce error messages?
Hi, Kevin! I have a question regarding custom properties. Consider you have design that has more than 10 neutral colors. And, you are assigning them in custom properties in such: :root { --clr-neutral-100: #FFF; --clr-neutral-400: #444; ..... --clr-neutral-900: #222; } In custom properties, you did assign from 100 to 900, which can hold only 9 values. What and how do you deal with the rest of the neutral colors? Would you assign them, like ---clr-neutral-100_1 or any other method? Thanks in advance.
From a design perspective if you've got more than 9 neutral colors, I think you're using too many colors for sure. Most color schemes only have a handful of neutral colors. You really don't need a different shade for every single component in your page. I tend to use a primary & secondary color with maybe 3 or 4 shades each and a light & dark neutral color with 4 or 5 shades. If you want to build a brand, you will likely have 2 or 3 colors that you actually use with a handful of neutral tones to complement / contrast your main colors. For most people a scale of 9 shades is more than enough for a single 'color'. You might have a light neutral and dark neutral which also have a 9 shade range but rarely will you need such fine distinctions between shades unless you're creating a gradient which you'd interpolate anyway.
Yeah, more than 9 shades of a color is a lot... BUT if you need to, I just keep going, lol. 900, 1000, 1100, etc. Though normally what happens is a new color gets added that's between two existing colors, which is why I like numbering in the 100s. If you have clr-neutral-1 and clr-neutral-2, it's annoying to get something in the middle... with 100s, you can have clr-100, clr-150, clr-200 etc.
About the empty paragraphs: There is actually a selector, that's like :empty, but it includes whitespaces. It's called blank. "p:blank" would select all paragraphs containing nothing at all, HTML comments or whitespaces+new lines (doesnt matter if its one line, or 20 new lines filled with whitespaces).
Yeah, I go by MDN. I like to stick to features where the browser compatibility matrix shows an all-green row. In the case of “:blank”, it’s still all red ... 😞
I never knew about the :empty psuedo class. I feel like Kevin reveals all the secrets of HTML & CSS. Thanks Kevin!
More please! I feel stupid everytime I think of the time I've wasted solving with js but I look forward to the years I'll save with these
"Front-end fiends!" It's getting better. Great job! I love your videos.
😂😂😂
How you commented 1 days ago, video released 2 hours ago?
'Friend and friends' lol
Automatic captions still think it's friend and friends, though. 😅
fiends be feenin'
I've programmed for years but I've never used :empty or :target.
So awesome, thanks Kev!
Selecting a parent? I've been waiting for that for years! Please show us 👍
I'll do a video on it soon-ish... for now, you can look up the :has() selector, but support for it is a ways off still
@@KevinPowell this should've been implemented a lot sooner! Need this ASAP Kevin speak to the web masters please!
Kevin, kudos…another super useful video. I always look to CSS as the easiest, most bulletproof way to just get things done. For anyone who has been doing this longer than 5 years it’s great to see CSS easily solve problems that used to take hours of javascript faffing to do.
Awesome content!
Only-child is really good, it would have solved a problem I had before.
Here's a contribution to this idea from a newbie. I once wrote a load of js to manage clicks on an animation of a timer wheel which would trigger a new image from the server.
I got rid of it all and instead made the click end the animation and then attach a listener to an animationiteration to trigger the new image download. No js timing needed!
Awesome content, Kevin!! I definitely want to see more such videos!
Wow, thank you so much. I needed this. Especially, this :empty is going to solve my problem 😇
kevin pls keep making videos, you really help me and many people to continue on this way of front-end development
Target and Empty is new for me
Thanks for the informative Video 😉
Pseudo selectors can also be combined: p:only-of-type:not(:only-child) for the single paragraph with the image,
or the other way around: img:first-child + p:only-of-type to ignore the one with multiple paragraphs, again use :not() to reverse the logic.
Wow, that's really helpful. I recently faced the empty error message problem and fixed it with JS. Please make more videos like this.
Loved the "scroll behaviour smoOoth" 4:25
I like the :target selector and I think a nice way to implement it would be to have an animation tied to it. Example would be to highlight in a way but fade it out after 1s.
Thats an awesome idea. Nice one two combo
@@AverageCho Thanks yea this target selector is amazing for this and if you already have smooth scroll in CSS, it's that much nicer.
Very nice Kevin, thanks for the useful tricks. Specially the :target...
Great tips! Definitely the right level of not-that-well-known, but also useful! Keep up the great work, Kevin! We appreciate it!
Thanks Kevin! This is really useful
Love :target pseudo selector.
have played with this and an animation so that it runs, identifies the area, and then removes the identifier
Great tips as always, Kevin! Waiting for :has video
Hi Kevin, started watching your videos recently and there is lots of intresting stuff here. One request, could you cover some 'practical' topics in depth at some point? Perhaps your best practices for starting a new Bootstrap site with the current version? (seen the old series you did.) Or talk about an overview of how your organise your CSS and why? What is the best way to arrange CSS to make best use of cascading? In other words, taking the things you have shown from your more ' flashy' videos and showing how to apply the knowledge to a typical real world project. Thanks.
Hey kevin, Thanks for awesome contents,looking forward video on how "has" function works in css,thanks in advance😊
Thank u so much Kevin and great content. we're really in need of these kind of videos
Just learned about _:empty_ a month ago when a markup script generated empty (p)aragraphs for row-breaks. Just thought "wonder if CSS has a solution for this".
Will use _:target_ in the future. Learned something new there.
we are appreciate your effort Kevin thanks, I love the dynamic development logic it's very useful and helpful to save our time.
Target is one of my favorites. I love using it for dynamic tabs.
Thanks I learned some new things! I'm a big fan of keeping things simple and get some work done 😁👍
Cool! I like the :target one.
In the target selector add an animation that just changes the brightness filter for a bit to highlight the target element instead of a red outline which I use all the time,it's easy to write, easy to use and very effective.
thank you! would love to know more about the has selector :D
You're making JavaScript Redundant with your videos 🥺🥺😍😍, Good work Mister Kevin
My gosh! How often I have looked for :has to check the state of the implementation. It's getting closer!!
You're the best Kevin, keep going! :)
that was awesome thing. wow Thank you so much Kevin
I've watched a few of your videos before and I was like, yeah okay you have some good tips. But you sir, have earned yourself a sub and a like after these nifty little tricks. Very well done!
I would be curious to see you refactor css of a site, getting rid of complex selectors in favor of where and is.
Your videos has saved my time and efforts almost everyday. 😁
would love to see content on the has selector but also an update video on when it's usable too
Yes! Thank you Kevin!
oh wow, i didn't know about the :target one... that has so much potential... less .js to write haha... Thanks Kevin!
Just noticed I could've used :target for something I did lately with JS... if I slap an id on the element this should work. 🙂
I really enjoy your content. You are like a box full of surprising css tools
Perfect... Thank your for sharing..
Great tips. Thx!
Damn, this is really helpful and saves lot of time.
6:44 Unrelated to your lesson, but does the pipe between "testimonials" and "flow" in the class attribute do something special here?
When looking at the .classList of the element using JS, it shows `DOMTokenList(3) ['testimonials', '|', 'flow']`. So the pipe is it's own class?
No, it's just a visual separator, picked it up from using CUBE CSS. It's technically a class that's just not doing anything at all. Might even be an invalid one, but it doesn't cause any problems.
Hi mate, thanks for the tutorial! I was wondering if it is possible to remove the styles for the " :target " element for like after a few seconds or even based on an event. Thanks!
Before I found out about only-child I just used :first-child:last-child. That does the same trick.
Hi Kevin, nice video. The features you mention are useful. I do have a question, -not directly related to this content- I hope you can either suggest a solution, or point to a video you have previously made. That is, if I want to 'highlight' a navigation item / tab, that is currently being displayed e.g. this page, how can I do this using only CSS? Thanks
You need a class that changes the styling, and apply to to the link for that page. There is nothing in CSS that can know what page is actually the active one
Hi Kevin, great video. When will be available your SASS course?
Nice video Kevin! I am wondering is it possible for built in css to handle click outside alerter for multiple mapped elements? Let’s say when we clicked outside of each element, the corresponding clicked element dissapear. I currently implement it with Javascript but it would be interesting if css can handle this too :)
Thank you so much Kevin! Love your videos
You are amazing Kevin, this video is a life changer for me.
Your videos make me less unenthusiastic about CSS. Thanks!
Yes, bring :has() content on! 😊
:has() can be enabled in Chrome and Edge beginning in v101 with the enable-experimental-web-platform-features flag and is slated to be GA in v105.
Good content! Greetings from Bilbao!!
thank you kevin. you rock!
:target blew my mind!
Thanks for these tips! I improve my CSS knowledge. Philippe P
These are really awesome!
Nice to see the usage of thisisnotarealperson to display images of people, rather than a common avatar service, Kevin!
Thanks, Kevin. You changed my life.
Awesome as always 🎉
Thanks for these!
5:30 hmm “tricks” with target?? What could that be?!
I've been in need of the :target pseudo class for a frontend mentor project for a whole month and something 😂
I thought I only have to use JavaScript 🤣
So at like 8:18 when you're explaining the :not(:only-of-type), I see why this is really useful, but wouldn't just giving the element a specific class be better? I know that it is generally best to stay away from complex selectors, so I was just wondering if you would normally prefer a class over doing this.
Very helpful I'll use. but Is there any way to set different margin or other attributes for p tag (paragraph) if 2 p is continuous like
demo para 1
demo para 2
You can select the second one with p + p...
Love this approach. CSS is powerful 💪
PS- waiting fervently for :has() !!
How the youtube and wikipedia has elements when they can't fit in to screen the position themselves top -215px and when there's enough space at the bottom the have top 200px like youtube has on the edit comment is through the use of intersection observer api and am i right api means functions, objects of a library and urls on web
My guess would be intersection observers, yes. In this case, the API is a bit different because it's one the browser uses, not an API you'd use to pull stuff from a server or whatever.
Look forward to having your has() video!
I'm working with CSS since early 2000 and I noticed that I tend not to know about new features of it. I'm just using the same thing as part of a habit, knowing that it works... You should always learn continuously! Don't make oldfags mistakes! :D
Very useful tips, gj.
Suddenly comments have popped up about your welcoming introduction "front end friends". Up until your previous upload I always thought you were saying "friend and friends" as in to welcome the viewer personally and then everybody else 😂
Yes I thought he was saying "friend and friends" when I first started watching his videos; just thought it was part of him being super nice. I hear "front-end friends" clearly now though.
What? I was sure it was friend and friends! It's just like with TheWarOwl, "I still have no clothes on".
THANK YOU FROM TAJIKISTAN !
Thanks Kevin
Keep generating videos with your style! BTW, do not you speak a lot during video :) ? This is spiritual energy!
nice tip thanks!
Hi Kevin. Could you do a video on why it’s still important to know pure CSS when we have Bootstrap and WordPress? By the way, I love CSS and have watched practically all of your videos. I’m currently a national qualifier in Website Design and Development for a prestigious event called “WorldSkills”, here in the UK and your videos have been essential for my preparation for it. Thank you!
Kind regards,
George
Well, unless you want your site to look like every other Bootstrap site, understanding CSS makes it a lot easier to work with and customize Bootstrap. I'd also say knowing CSS just makes you use Boostrap much better as well... plus while Bootstrap is popular, it's not *that* popular, and probably fading within the job market as well for other solutions. Knowing the base language makes it a lot easier to pivot and adapt as the landscape changes :)
Also, good luck with the WorldSkills competition! I was a mentor a couple of times for those when I was still working at a school :)
@@KevinPowell Wow! Thanks for so quickly responding! Ah really good answer! Thank you! Totally agree! And thanks so much! That means so much coming from the King of CSS!
I wonder if I should actually use :empty... Sounds like it would leave a bunch of hidden HTML in the DOM.
I should probably just continue not including it, whether on the server or on the client.
This is excellent Kevin. Would like to see something on :has
About :target, wouldn't it mess with keyboard navigation? I used that property in the past for visually show the keyboard navigation. But other than that, I don't know much about it.
I wish I knew about :empty in the past, I have spent so many hours hiding error messages and flash messages.
It shouldn't have any impact on keyboard navigation? It's just a visual clue for what's been targetted... you just wouldn't want to use the same style for :outline as you would for :target because then that would get annoying
Hi Kevin. Do you have a video that explains the differences between styles in html and * selectors? Thanks
Awesome!
Kevin I'm currently learning Web design but after learning css I've become obssesed with it. You think it's better to become very good at css before jumping to Javascript or i should start now ?
I guess it depends on how far along you are, but once you feel like you're getting comfortable with CSS, even if you're not "very good" yet, I'd probably start sprinkling in some JS
@@KevinPowell Thanks that I'll do ! Should i start from scratch or straight to react ?
Hey Kevin! Love your content! but I'm really a dumb on responsive side :D May you make a clone project that focus on responsive side, such as cards, nav... thank you!
Have you checked out Kevin's Responsive design course?
Can't post links but if you search
Kevin powell responsive design
it should be the first link
I like those profile pictures of Jane and John in the first segment on :empty. How many times did you have to refresh the page to get such good results? 😉
Showed up in my first load of loremfaces.com/ :)
Greetings, awesome content. Would you happen to know of a good web form validation script that increases accessibility by enabling screen readers to announce error messages?
Oh, that would be great. I don't know of one... there must be something out there though. Time to start digging
Question: if u use the empty pseudo reset thingy on everything but Img svgs does it mean u cant make boxes from divs now, cuz its empty
great video! when will be available the SASS course? 🙂
don't ask 🤣🤣 - taking a break from working on it to read some comments... it's getting there... slowly, lol.
@@KevinPowell don't worry Kevin ☺️ take rest. Thanks for quick answer
Letting you know :)
Please do :has()
It’s a game changer!
Hi, Kevin! I have a question regarding custom properties. Consider you have design that has more than 10 neutral colors. And, you are assigning them in custom properties in such:
:root {
--clr-neutral-100: #FFF;
--clr-neutral-400: #444;
.....
--clr-neutral-900: #222;
}
In custom properties, you did assign from 100 to 900, which can hold only 9 values. What and how do you deal with the rest of the neutral colors? Would you assign them, like ---clr-neutral-100_1 or any other method?
Thanks in advance.
From a design perspective if you've got more than 9 neutral colors, I think you're using too many colors for sure. Most color schemes only have a handful of neutral colors. You really don't need a different shade for every single component in your page. I tend to use a primary & secondary color with maybe 3 or 4 shades each and a light & dark neutral color with 4 or 5 shades.
If you want to build a brand, you will likely have 2 or 3 colors that you actually use with a handful of neutral tones to complement / contrast your main colors.
For most people a scale of 9 shades is more than enough for a single 'color'. You might have a light neutral and dark neutral which also have a 9 shade range but rarely will you need such fine distinctions between shades unless you're creating a gradient which you'd interpolate anyway.
Yeah, more than 9 shades of a color is a lot... BUT if you need to, I just keep going, lol. 900, 1000, 1100, etc. Though normally what happens is a new color gets added that's between two existing colors, which is why I like numbering in the 100s. If you have clr-neutral-1 and clr-neutral-2, it's annoying to get something in the middle... with 100s, you can have clr-100, clr-150, clr-200 etc.
About the empty paragraphs: There is actually a selector, that's like :empty, but it includes whitespaces. It's called blank.
"p:blank" would select all paragraphs containing nothing at all, HTML comments or whitespaces+new lines (doesnt matter if its one line, or 20 new lines filled with whitespaces).
Sadly it's not supported anywhere though :\
Yeah, I go by MDN. I like to stick to features where the browser compatibility matrix shows an all-green row.
In the case of “:blank”, it’s still all red ... 😞
How to make active class on links for nav in target?
You're the man, man.
What is the deal with the vertical bar in the class name (“testimonials | flow”)? I’ve never seen that before, and the google is failing me.
Comes from CUBE CSS, it's just a visual separator between "blocks" and "utililities"
Could you use this to make a carousel?
Cool!