@@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!
+ 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()
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.
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
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.
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; }
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.
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.
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 :))
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!
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!
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.
Using a[class*="another"] { color: red; } ( your code was a[class|="another"] { color: purple; } ) instantly changes the color even though if "another-link" is typed "anotherlink" buddy ! Keep that in mind :) I'm using div[class*="col-"] for Bootstrap.
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).
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!
I was just thinking.. is it possible to cause a Circular-Reference/Recursion/Endless-Loop with CSS?! like with this attribute selector like "a[xy..]" ?
Hi Kevin! Is there an actual difference between * + * and *:not(:first-child) (when it is actually first child) or is it just more idiomatic/less typing? thanks
As for the final result these are the same I believe. I think *+* is older and thus has better support. Another thing to consider is that :not() is advised to lesser use as it has bad performance and increases specificity (I don't remember where I read that, maybe on developer.mozilla.org) Good lecture on this topic is at developer.mozilla.org/en-US/docs/Web/CSS/:not and developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No selector that goes that way, sadly :( :focus-within might be the closest, where if you say, .form:focus-within, if anything inside the form has focus, it'll style the form differently (as an example). But it relies on focusable elements obviously.
You're one of my constant go-tos in the CZcams 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.
This is one of the most underrated channel on whole CZcams for web dev.
One of the best explanation of advance selector on whole CZcams..
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!
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()
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 👍
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 😂
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
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.
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!
Very helpful tutorial. Short and to the point. Thanks Kevin!
my favorite CZcams channel.
If I remember correctly, we call the "straight line down thing" a pipe :). Great video!
That's it! Thanks Konrad!
I basically had no idea these existed, so thank you!
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 the video, Kevin. Like all of your videos, I found it very helpful. Please keep them coming.
Man those attribute selectors! How have I not heard of these before!?
Very informative and technical info. Thanks a lot. Examples really show something different like blue vs green, like totally different
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.
BAH DAH BAH BAH BAHHH....I'M LOVING IT!!! Thanks KP!
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 :))
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!
Thank you Kevin, you are the best css teacher I ever had.
Looking forward to using attribute selectors. Good stuff.
Kevin, you are awesome. I always learn thanks to your videos
Thanks Oscar, glad you like my content :D
Thanks Kevin,fr taking out time to make videos
No problem at all Mari, glad you liked it :)
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 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 😕
I know I'm kinda late, but I just want you to know I like this video.
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 . . .
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!
I'am loving it
this is just so easy and clear to understand
thank you sooooo much...........
The attribute selectors felt familiar . . . regular expressions! Had no idea we could use regexp in css. Super helpful information.
Thanks for high quality and easy to understand contents.
It's detailed information about advanced selector, Thank you so much for it.
The universal selector is also used to set the box sizing calculation:
* {
box-sizing: border-box;
}
omg this is GREAT ! i learnt a lot ! thank you so much Kevin :)
Tremendous content kevin. millions of kudos for you.
The "straight line" is a pipe. This video is excellent bty.
I always forget that for some reason! And glad you enjoyed the video
Nice explanation.....Best video of selectors
Learned so much from you sir..
Many thanks for all of the tutorials. You are the best.
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.
I just wanna say thank you to upload these awesome videos.it helped me a lot :)
Using a[class*="another"] { color: red; } ( your code was a[class|="another"] { color: purple; } ) instantly changes the color even though if "another-link" is typed "anotherlink" buddy ! Keep that in mind :) I'm using div[class*="col-"] for Bootstrap.
Okay you mentioned it. My fault :D
lol, no problem :)
I love the technicals !!!!! Very clean coding is soo much BETTER ! Thank You. Peace :)
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).
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.
King, the straight line down thing is called 'pipe' .
Good one. Very clean explanation. I enjoyed it.
Great explanation
Loved the videos!
12:19, it is called "Pipe" symbol.
11:25 It would have been more handy if Relational operators (like ==) are used.
Thanks for the video. It filled some gaps and I can use some of the advanced selectors right now :)
Awesome!
Really well made video.
Super useful, thanks
I really enjoyed this
u r my boss, clear and cool videos, plz more :D
am i the only one who come to youtube from udemy to learn and think these guys are actually better?
Haha, thanks :). Udemy can be very hit and miss. I'm all for paid courses that deliver, but too many there are lower quality sadly.
Thanks a lot Kevin, Very nice explanation
Thanks Diniesh! Glad you liked it!
Thank you Kevin. Your videos are Awesome as always :)
Thanks, Nikhil!
Very helpful, thanks a lot Kevin.
No problem 😁
Found out about your channel today. Incredible content. Instant subscribe!!
Glad you liked it and thanks so much for the sub!
to call "+" an "adjacent sibling" operator is a misnomer. It's really a _succeeding_ sibling operator
These are going to be very helpful, thank you.
No problem Albert!
love it. Thanks alot for your video
Great video. Thank you
Thanks for your clear explanation on the selectors with great examples.
Awesome, content. Thanks.
What an awesome lesson!
So good tutorial
Awesome explanation. I liked it :)
Best teacher!!!
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!)
2:45 Death to pointless margin-top! Boy I enjoyed hearing that.
are you web a web developer?
@@pixelheart2467 ? yes, if I understand your question, and if it was directed at me
You are Great kevin. Thanks lot.
Very helpful tutorial. Thanks
Thank you 👍
I have doubt will it work if the links are nested in divs the + adjacent attribute
Hi Kevin. What if you opinion of doing margin-bottom: 0, instead of margin-top: 0 in the * selector ?
The straight line down is called a 'pipe'
Kevin, why wasn't the selection like
.general-sibling + .box, but rather it was .general-siblings .box + .box?
i am confused
| this is called vertical bar but most people refer to it as pipe.
what's the best thing how to remember these selectors?
I was just thinking.. is it possible to cause a Circular-Reference/Recursion/Endless-Loop with CSS?! like with this attribute selector like "a[xy..]" ?
Great Video . Thanks a lot , very helpful
Great video 👏🏼👏🏼👏🏼👏🏼👏🏼
Great tips, thanks.
No problem, glad you liked it.
How can I only select elements which DON'T contain an tag? Not sure how I can use the :not selector for this purpose.
Not possible with only CSS. There is no parent selector, otherwise we could probably figure something out.
Might be a way to do it with JS.
Hi Kevin! Is there an actual difference between * + * and *:not(:first-child) (when it is actually first child) or is it just more idiomatic/less typing? thanks
As for the final result these are the same I believe. I think *+* is older and thus has better support. Another thing to consider is that :not() is advised to lesser use as it has bad performance and increases specificity (I don't remember where I read that, maybe on developer.mozilla.org)
Good lecture on this topic is at
developer.mozilla.org/en-US/docs/Web/CSS/:not
and
developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Well Done Kevin. I am a frequent visitor.
Really helpful thanks a lot !
thanks a lot!
Good stuff man, thanks.
Glad you liked it :D
thanks man, make a video with pseudo element selector like nth-child
Please will you explain in deep sir on ~ tild selector
Thanka for this!
what is the difference between * and * * or *>* , I use it a lot in CSS battles but honestly I don't know theory behind it xD
Oh! Now I get it, these selectors work just like Regular Expressions operators.
Yup! Most people learning CSS don't know what those are though, so I didn't even think of drawing that parallel.
Good video
just want to know how to go up (select) for parent, grand parent or grand grand parent of a child object?
No selector that goes that way, sadly :(
:focus-within might be the closest, where if you say, .form:focus-within, if anything inside the form has focus, it'll style the form differently (as an example). But it relies on focusable elements obviously.
Great content!