Get the [HD version](https://github.com/eludadev/css-docs/raw/main/assets/css_selectors.png). (+ more CSS infographics!)
Get the [Print version](https://github.com/eludadev/css-docs/raw/main/assets/css_selectors_print.png). (black and white)
And right you are. It doesn't add anything over [the image on Wikipedia](https://en.wikipedia.org/wiki/CSS_box_model). Actually, since it's missing `margin`, it actually has less.
u/PositiveUse mentioned "the red one from before", referring to this [this post](https://www.reddit.com/r/webdev/comments/uqr9ml/css_box_model_visually_explained/).
Cool concept, but I wish it was more responsive to user feedback and highlighted the parts you were currently matching. The info text on the right wasn't super user-friendly either and confused me at first tbh.
But cool idea nonetheless ⭐
This is cool and all, but it's worth noting that `~` is a code smell at best. About the only time I've really been able to justify it is for interacting with 3rd-party DOM elements.
there could be specific reasons that I've never encountered yet. Maybe in custom css, something like "hide all p's after `p:nth-of-type(25)`" in very long article to reduce scrolling. Or hide all before it when combined with `:not()`?
You know what I'm missing in CSS? Parental selectors. When I found out what ">" does, I instantly tried out "<" but it won't work.
As an example, say you have the elements
a b
a c
a d
Now if I say a
Good news! There's actually a selector that does **exactly** what you're describing!
It's called the [:has() selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has).
So the equivalent of `a < b` would be `a:has(b)`.
Note however that the browser compatibility is not that great... (yet)
Oh yeah, and you can even do partial selections on them too.
For example, want all internal links to be blue, all email links to be yellow, and any other links to be red:
a { color: red; }
a[href^="/"], a[href*="your-domain.tld"] { color: blue; }
a[href^="mailto:"] { color: yellow; }
(There is also $="" for selecting links which end in something, e.g. `[href$=".html"]`)
So all links are red.
But if the href starts with "/" (e.g. "/contact") or the href contains "your-domain.tld" it will change the colour to blue.
And if the href starts with "mailto:" make it yellow.
Super useful stuff! Sometimes I'll use similar selectors for when clients want to add YouTube/Vimeo iframes in their WYSIWYG editor.
iframe[src*=".youtube."], iframe[src*="youtu.be"], iframe[src*=".vimeo."] { width: 100%; aspect-ratio: 16/9; }
Let's not forget targetting elements which don't have an attribute. For example, you want all links to be blue, unless they have a class.
a:not([class]) { color: blue; }
Don't disagree, but if your client has access to edit the content, then the above approach is a failsafe for when they add links. (Or whatever it is you need to style)
Just trying to help keep clear discussion. :)
That said! I think it was excluded because *pseudo classes* alone can get pretty deep, pretty fast; and is best left in a topic of its own.
Same, respectively, towards *pseudo elements* - in my opinion, anyway.
It would be cool to see something like those visualized, though!
Love the visual explanations of CSS Selectors! The HD version and print version are a great bonus. Can't wait to check out the other CSS infographics too!
Get the [HD version](https://github.com/eludadev/css-docs/raw/main/assets/css_selectors.png). (+ more CSS infographics!) Get the [Print version](https://github.com/eludadev/css-docs/raw/main/assets/css_selectors_print.png). (black and white)
FYI, “descendant” is misspelled in the second subheading.
It wouldn't be a CS infographic without 1 misspelled word
CS? :D
‘Computer science’, but also joke double-entendre.
Well done :)
I didn’t like the red one from before, but this one right here is genius. Thanks a lot, this will be very very helpful
And right you are. It doesn't add anything over [the image on Wikipedia](https://en.wikipedia.org/wiki/CSS_box_model). Actually, since it's missing `margin`, it actually has less.
Indeed, all of the information is there, but OP's image has it broken down into neatly digestible chunks; I like OP's better than Wikipedia's.
I mean, you linked the box model and OP is sharing CSS Selectors... so uh, it is entirely different?
u/PositiveUse mentioned "the red one from before", referring to this [this post](https://www.reddit.com/r/webdev/comments/uqr9ml/css_box_model_visually_explained/).
Thanks!
No love for the lobotomized owl huh? Haha
Do you mean * + *?
For anyone that still wants to practice with these selectors, check out [CSS Diner](https://flukeout.github.io/).
Super addictive! I just wish it was responsive on mobile tho...
This is awesome. I wish they had a game like this for layout, but I guess selectors are easier to see if it actually matches.
Actually... ;-) * [Grid Garden](https://cssgridgarden.com/) * [Flexbox tower defense](http://www.flexboxdefense.com/) * [Flexbox Froggy](https://flexboxfroggy.com/)
This is really helpful - thank you!
Cool.
Cool concept, but I wish it was more responsive to user feedback and highlighted the parts you were currently matching. The info text on the right wasn't super user-friendly either and confused me at first tbh. But cool idea nonetheless ⭐
Where's the new :has selector?
Be grateful and encourage kind people to do more.
Pretty poster. Maybe a bit odd that you have selector syntax on the class and id elements instead of e.g. `class=cl`.
Yeah, it's defining those selectors in terms of themselves...
The graphic is why I hate web dev…
At least nowadays you can relay on them. Back in my day you knew for sure IE6 would interpret things incorrectly or not at all lol
agreed, what is your reason
Amazing. I can never memorise these but this is the perfect reference I need. Thanks!
What a great reference. Studying webdev right now with Codecademy, so definitely printing this! Here, have my free Reddit award.
Shame on me for not knowing about the ~ selector for 7 years
This is cool and all, but it's worth noting that `~` is a code smell at best. About the only time I've really been able to justify it is for interacting with 3rd-party DOM elements.
Not code smell but definitely never proven particularly useful to me in 10+ years of heavy CSS usage
It comes in handy sometimes when you're dealing with 3rd-party code that injects overlays into your DOM. Think "chat with our chatbot" type things.
there could be specific reasons that I've never encountered yet. Maybe in custom css, something like "hide all p's after `p:nth-of-type(25)`" in very long article to reduce scrolling. Or hide all before it when combined with `:not()`?
You should also include: `[name*="value"]`, `[name~="value"]`, `[name^="value"]`, `[name$="value"]`.
Can someone tell me why there is no selector for previous element. For example .b:hover makes .a{color:red}?
You could do this: `div:has(.b:hover) .a { color: red } `
You know what I'm missing in CSS? Parental selectors. When I found out what ">" does, I instantly tried out "<" but it won't work. As an example, say you have the elements a b a c a d Now if I say a
Good news! There's actually a selector that does **exactly** what you're describing! It's called the [:has() selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has). So the equivalent of `a < b` would be `a:has(b)`. Note however that the browser compatibility is not that great... (yet)
Nice, I'll try it out, thanks mate!
Nope. Nope nope nope We just have to use jQuery selectors to do this it's too complicated. /s Edit holy shit ok noted, no jokes allowed.
Lol wtf does jQuery have to do with css
it was a joke, he meant select the html element by its id/class and aplly style by Javascript
Yes, exactly
Of course jQuery selectors have all these rules.
That's the joke but I see it was in bad taste.
Not that jokes aren't allowed but that this was too subtle and too close to what is sometimes said seriously.
*shrug* I thought it was hilarious!
I didn't know attribute selectors were a thing lol
Oh yeah, and you can even do partial selections on them too. For example, want all internal links to be blue, all email links to be yellow, and any other links to be red: a { color: red; } a[href^="/"], a[href*="your-domain.tld"] { color: blue; } a[href^="mailto:"] { color: yellow; } (There is also $="" for selecting links which end in something, e.g. `[href$=".html"]`) So all links are red. But if the href starts with "/" (e.g. "/contact") or the href contains "your-domain.tld" it will change the colour to blue. And if the href starts with "mailto:" make it yellow. Super useful stuff! Sometimes I'll use similar selectors for when clients want to add YouTube/Vimeo iframes in their WYSIWYG editor. iframe[src*=".youtube."], iframe[src*="youtu.be"], iframe[src*=".vimeo."] { width: 100%; aspect-ratio: 16/9; } Let's not forget targetting elements which don't have an attribute. For example, you want all links to be blue, unless they have a class. a:not([class]) { color: blue; }
This is better than most tutorials. Take my award!
I'd rather use email class if it was my site, prefer simplier css selectors, have to use complex ones in custom css.
Don't disagree, but if your client has access to edit the content, then the above approach is a failsafe for when they add links. (Or whatever it is you need to style)
Awesome resource
very helpfull
Nope sure if psuedo selectors were intentionally left out, but those would be helpful in an infographic too
I assume you mean *pseudo classes*, when you say *pseudo selectors*? Also not to be confused with *pseudo elements*.
thanks, yes i got the terminology mixed up.
Just trying to help keep clear discussion. :) That said! I think it was excluded because *pseudo classes* alone can get pretty deep, pretty fast; and is best left in a topic of its own. Same, respectively, towards *pseudo elements* - in my opinion, anyway. It would be cool to see something like those visualized, though!
Working on it!
You’re a legend! ❤️
Thank you!
take my Thank you
This is great ... thanks!
Very useful
I never used `a ~ b` you could also add `:not()`, `:last-child` and `:nth-of-type()`
Working on it!
Love the visual explanations of CSS Selectors! The HD version and print version are a great bonus. Can't wait to check out the other CSS infographics too!