@@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()
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.
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
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!
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.
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.
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!
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).
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.
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!
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
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?
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..]" ?
@Kevin Powell At the university i am attending we are learning about something called universal web-design is this something you follow and keep in mind while designing web-sites?
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.
I think they really are. ^= matches attributes that starts with some string bounded by anything; $= matches attributes that ends with some string bounded by anything; *= matches attributes that contains some string bounded by anything; |= matches attributes that starts with some word bounded by space; ~= matches attributes that contains some word bounded by spaces or hyphens.
This is one of the most underrated channel on whole TH-cam for web dev.
One of the best explanation of advance selector on whole TH-cam..
You're one of my constant go-tos in the TH-cam 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!
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 👍
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.
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
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 basically had no idea these existed, so thank you!
If I remember correctly, we call the "straight line down thing" a pipe :). Great video!
That's it! Thanks Konrad!
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!
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 :))
Thank you Kevin, you are the best css teacher I ever had.
Thanks for the video, Kevin. Like all of your videos, I found it very helpful. Please keep them coming.
Looking forward to using attribute selectors. Good stuff.
Man those attribute selectors! How have I not heard of these before!?
Very helpful tutorial. Short and to the point. Thanks Kevin!
The attribute selectors felt familiar . . . regular expressions! Had no idea we could use regexp in css. Super helpful information.
Very informative and technical info. Thanks a lot. Examples really show something different like blue vs green, like totally different
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!
my favorite TH-cam channel.
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. 😂♥️
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 ?
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.
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.
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 😕
BAH DAH BAH BAH BAHHH....I'M LOVING IT!!! Thanks KP!
Tremendous content kevin. millions of kudos for you.
Kevin, you are awesome. I always learn thanks to your videos
Thanks Oscar, glad you like my content :D
Thanks for high quality and easy to understand contents.
The "straight line" is a pipe. This video is excellent bty.
I always forget that for some reason! And glad you enjoyed the video
Thanks Kevin,fr taking out time to make videos
No problem at all Mari, glad you liked it :)
I'am loving it
this is just so easy and clear to understand
thank you sooooo much...........
I know I'm kinda late, but I just want you to know I like this video.
Nice explanation.....Best video of selectors
Learned so much from you sir..
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!
It's detailed information about advanced selector, Thank you so much for it.
Many thanks for all of the tutorials. You are the best.
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).
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 . . .
Good one. Very clean explanation. I enjoyed it.
omg this is GREAT ! i learnt a lot ! thank you so much Kevin :)
The universal selector is also used to set the box sizing calculation:
* {
box-sizing: border-box;
}
I just wanna say thank you to upload these awesome videos.it helped me a lot :)
Great explanation
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.
I love the technicals !!!!! Very clean coding is soo much BETTER ! Thank You. Peace :)
Thanks a lot Kevin, Very nice explanation
Thanks Diniesh! Glad you liked it!
Thanks for the video. It filled some gaps and I can use some of the advanced selectors right now :)
Awesome!
Very helpful, thanks a lot Kevin.
No problem 😁
u r my boss, clear and cool videos, plz more :D
Awesome explanation. I liked it :)
Loved the videos!
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 :)
King, the straight line down thing is called 'pipe' .
Found out about your channel today. Incredible content. Instant subscribe!!
Glad you liked it and thanks so much for the sub!
12:19, it is called "Pipe" symbol.
These are going to be very helpful, thank you.
No problem Albert!
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!)
Hi Kevin. What if you opinion of doing margin-bottom: 0, instead of margin-top: 0 in the * selector ?
love it. Thanks alot for your video
Super useful, thanks
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
Really well made video.
Thank you Kevin. Your videos are Awesome as always :)
Thanks, Nikhil!
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.
I really enjoyed this
Great video. Thank you
Very helpful tutorial. Thanks
Thank you 👍
Thanks for your clear explanation on the selectors with great examples.
You are Great kevin. Thanks lot.
What an awesome lesson!
Great Video . Thanks a lot , very helpful
Awesome, content. Thanks.
Kevin, why wasn't the selection like
.general-sibling + .box, but rather it was .general-siblings .box + .box?
i am confused
Great tips, thanks.
No problem, glad you liked it.
to call "+" an "adjacent sibling" operator is a misnomer. It's really a _succeeding_ sibling operator
Really helpful thanks a lot !
11:25 It would have been more handy if Relational operators (like ==) are used.
So good tutorial
I have doubt will it work if the links are nested in divs the + adjacent attribute
Good stuff man, thanks.
Glad you liked it :D
The straight line down is called a 'pipe'
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?
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?
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 content!
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
@Kevin Powell At the university i am attending we are learning about something called universal web-design is this something you follow and keep in mind while designing web-sites?
Well Done Kevin. I am a frequent visitor.
Awesome video!
Great Video. thanks
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.
Best teacher!!!
thanks man, make a video with pseudo element selector like nth-child
Great video. Those attribute selectors appear to loosely take their meaning from regular expression processing.
I think they really are.
^= matches attributes that starts with some string bounded by anything;
$= matches attributes that ends with some string bounded by anything;
*= matches attributes that contains some string bounded by anything;
|= matches attributes that starts with some word bounded by space;
~= matches attributes that contains some word bounded by spaces or hyphens.
Great video 👏🏼👏🏼👏🏼👏🏼👏🏼
great video...thank you!
You're welcome!
Thank you!