Step up your CSS game using these selectors and combinators
HTML-код
- Опубликовано: 30 янв 2018
- Most people know the basic selectors, but aren't aware that there are some really useful advanced selectors as well.
In this video, I take a look at the universal, direct child, general sibling, adjacent sibling, and a bunch of attribute selectors.
While I'm a big advocate of trying not to nest selectors too much, we can use these advanced CSS selectors in fun ways to save us having to write extra CSS.
CodePen: codepen.io/kevinpowell/pen/MQ...
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![Jelly Roll - Dead End Road (From Twisters: The Album) [Official Music Video]](http://i.ytimg.com/vi/_Mb8CqKW4R8/mqdefault.jpg)
This is one of the most underrated channel on whole RUclips for web dev.
One of the best explanation of advance selector on whole RUclips..
You're one of my constant go-tos in the RUclips Realm, thanks so much for your high quality content!
So glad to hear that Jane! Really glad that you're enjoying my videos!
@@KevinPowell Just as a side note... the emoticon gallery has been really extensivelt developed, and many icons you can find in this gallery, which is built in, which means you do not have to make another separate request for an icon. You need to set UTF-8, but everyone should use that anyways. And emoticons can be used as single colors too, so you can color it. You should use the entities for it, just to be sure.
The attribute selector was what I had been looking around for months. You sir just answered all of my questions related to that here. Thank you very much, mate!
Great video, I really like the level of depth you put into the explanations and for even setting up the demo. Well done, keep up the good work!
Thank you for providing us with so many helpful explanations. I've been using advanced selectors for several months, but it's often been a bit of a trial & error guessing game to figure out which one I need. This video gave me a much better understanding of the children and sibling selectors. And I had barely looked at the attribute selector before, but now that makes a lot more sense too.
Very helpful tutorial. Short and to the point. Thanks Kevin!
Thanks for the video, Kevin. Like all of your videos, I found it very helpful. Please keep them coming.
at 12:19 >> *"|"* is called >> verti-bar, vbar, stick, vertical line, vertical slash,bar, pike, or pipe, and several variants on these names. from en.wikipedia.org/wiki/Vertical_bar My teacher Called it Pipe Symbol in class.
every day really your videos brush up my CSS skills. while I see your thumbnails of videos, feel like finally will go to understand the crucial concepts. feeling blessed
Kevin, Every time I watch a video for you I learn something new, no idea where you get the stuff from, but here I am learning something new today, Thanks a million and God Bless You.
Hopefully I can keep finding these things 😂
Excellent content; I like the level of detail while remaining basic and easy to comprehend with an example. Thank you for providing such high-quality information. Bravo!
I really appreciate you explaining the reset. So many people just tells you to include a reset with minimal explanation.
Enjoy your tutorials. Thanks!
No problem at all! Thanks for the feedback, it's good to know when these things are appreciated 👍
Very informative and technical info. Thanks a lot. Examples really show something different like blue vs green, like totally different
I not only liked it, instead I loved it and I love all your efforts that are helping us incredibly and amazingly... Love you Man
So happy that you enjoyed it that much Ankit!
I loved your easy explanation of + and ~. I was using + everywhere because I didn't really understand the other. It really cleared things up for me!
+ is the selector for the next SINGLE ELEMENT (of some kind) after some element while the other, ~, selects the next MULTIPLE ELEMENTS (of some kind) after some element. You can think of + as a css way for js Element.nextElementSibling with additional check to Element.matches()
thanks so much! another great use of selectors is in javascript with document.querySelector, I use it for automating stuff on websites all the time, and with these new css tricks i'll be UNSTOPPABLE :))
omg this is GREAT ! i learnt a lot ! thank you so much Kevin :)
Looking forward to using attribute selectors. Good stuff.
I basically had no idea these existed, so thank you!
I'am loving it
this is just so easy and clear to understand
thank you sooooo much...........
One almost essential selector these days is the *:not* selector.
It's the best way to do things like:
1) Exclude the logo (home page link) from the usual rule of marking the current webpage (here classed as ".point")
e.g. .point:not(.mylogo)::after {
width: 100%;
height: 2px;
}
2) Exclude the current page from the usual hover marker
e.g. .navlink:not(.point):hover::after {
width: 100%;
height: 2px;
}
True!! I use this selector almost every time!!
The :not() selector is said to be expensive for performance but it is used a lot in the implementation of the Edge (the new version) DevTools UI an probably in Chrome DevTools also... So... If it's good enough for them it for me too.
@@Victor_Marius It's not a *visible* issue on my Huawei Y6 smartphone. But surely the preprocessor could handle this type of selection assignment ?
Thanks for high quality and easy to understand contents.
Kevin, you are awesome. I always learn thanks to your videos
Thanks Oscar, glad you like my content :D
Thank you Kevin, you are the best css teacher I ever had.
Tremendous content kevin. millions of kudos for you.
I just wanna say thank you to upload these awesome videos.it helped me a lot :)
Awesome demo, Kevin Powell. Thanks! Just one thing I’ll point out, and I’ve used it for this before: attribute selectors are a good workaround to override !important. As I’m sure you’re well aware, Bootstrap templates/overrides can be a bit (ahem) clunky, so that’s been a failsafe for me in some situations.
The attribute selectors felt familiar . . . regular expressions! Had no idea we could use regexp in css. Super helpful information.
Nice tutorial as always. A nice use case for attribute selectors is combining them with data- attributes
Good point, I should have mentioned that in the video 😕
If I remember correctly, we call the "straight line down thing" a pipe :). Great video!
That's it! Thanks Konrad!
Many thanks for all of the tutorials. You are the best.
It's detailed information about advanced selector, Thank you so much for it.
Great and informative video. I didn't know you could put an url in the content, that was something new for me. I don't understand why they don't clearify that the vertical bar selector hasn't anything to do with what the word starts with rather that it needs to be one exact word, unless you have a hyphen seperating it (but this is just an exeption).
Good one. Very clean explanation. I enjoyed it.
Thanks Kevin,fr taking out time to make videos
No problem at all Mari, glad you liked it :)
I love the technicals !!!!! Very clean coding is soo much BETTER ! Thank You. Peace :)
You made that look too easy! Thanks a million, Kevin. Practically, what I'm gonna be watching next is, you versus Kevin on a css battle. 😂♥️
Nice explanation.....Best video of selectors
Learned so much from you sir..
BAH DAH BAH BAH BAHHH....I'M LOVING IT!!! Thanks KP!
12:19 That's usually called a vbar, for vertical bar, or just bar. It has some other names when it's used for logic or math though.
Thanks for the video. It filled some gaps and I can use some of the advanced selectors right now :)
Awesome!
the character that is up and down is called the pipe symbol lol
Thanks Darrell, I should've know that :\
Came here for this.... four months too late.
Or a separator
Its official typography name is "vertical bar": en.m.wikipedia.org/wiki/Vertical_bar
Or the OR symbol, if you're a Java(Script) coder LOL . . .
Great Video . Thanks a lot , very helpful
Man those attribute selectors! How have I not heard of these before!?
Thank you Kevin. Your videos are Awesome as always :)
Thanks, Nikhil!
Thanks a lot Kevin, Very nice explanation
Thanks Diniesh! Glad you liked it!
Very helpful, thanks a lot Kevin.
No problem 😁
love it. Thanks alot for your video
Awesome explanation. I liked it :)
These are going to be very helpful, thank you.
No problem Albert!
You are Great kevin. Thanks lot.
Great explanation
Found out about your channel today. Incredible content. Instant subscribe!!
Glad you liked it and thanks so much for the sub!
What an awesome lesson!
my favorite RUclips channel.
This isx a great video - previously I was using JavaScript to add a little icon after external links - but now I've changed that to this CSS:
a[rel*="external"]::after {
content: url('/images/external-link.png');
padding-left: 5px;
}
Thanks!
Thanks so much for the super kind words, and really glad that you're enjoying my content!
Super useful, thanks
The universal selector is also used to set the box sizing calculation:
* {
box-sizing: border-box;
}
Great video. Thank you
Loved the videos!
Really well made video.
Awesome, content. Thanks.
I know I'm kinda late, but I just want you to know I like this video.
I really enjoyed this
u r my boss, clear and cool videos, plz more :D
Really helpful thanks a lot !
Very helpful tutorial. Thanks
Thank you 👍
Awesome video!
Great content!
Great Video. thanks
Great tutorial!!! I learned a lot from your tutorial...tysm :):)
I want to select the parent list element by selecting the child anchor tag in it with CSS only not JS, can you help me out?
Thanks for your clear explanation on the selectors with great examples.
11:25 It would have been more handy if Relational operators (like ==) are used.
Thank you!
Great video 👏🏼👏🏼👏🏼👏🏼👏🏼
The "straight line" is a pipe. This video is excellent bty.
I always forget that for some reason! And glad you enjoyed the video
So good tutorial
Great tips, thanks.
No problem, glad you liked it.
Thanka for this!
thank you sir!
thanks a lot!
Thank you alot.
awesome genius man
thanks for the help👌👌
Good stuff man, thanks.
Glad you liked it :D
thanks man, make a video with pseudo element selector like nth-child
Best teacher!!!
Thanks!
Ty
so helpful
loved it
great video...thank you!
You're welcome!
King, the straight line down thing is called 'pipe' .
Kevin, I love your content. I find it hard to see where you are "swishing lol" around with your mouse when you are pointing out a feature. Could you be a little more descriptive of where you are pointing with your teeny tiny pointer? Good video!
Protip: Make the mousepointer larger and set it to the 'negative' theme (it'll turn black on a white background and white on a black background!)
Clearly explained
Thank you sir, very informative video to learn CSS Selector. These days I am hearing a lot about SelectorsHub CSS Selector tool, hows that tool sir?
12:19, it is called "Pipe" symbol.
gud one .. thanks!
You are great!
Gracias..! Genial..!