Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
mrx3
8,742 PointsI have a question about , general, adjacent, and child selectors ?
I understand what they are, I just don't understand where, and when to use them. I'm a beginner in the web development/design process. Can someone give me a few examples of each of these where you have used them, and why? Most sites I've made, I've never used them and I'm curious as to where you would/have. I understand the nth-child, and where to use them, just not the three I mentioned. Thanks in advance for the help.
2 Answers
James Barnett
39,199 PointsI often use child selectors in lists, 2 examples are outlines and accordion widgets. I use adjacent selectors for CSS tooltips and CSS re-sizable checkboxes via Icon Fonts.
Here are 3 examples that I simplified from working code that use adjacent selectors:
Kevin Korte
28,149 PointsI don't hardly use them, and the biggest reason is they start to add complexity. I like to keep my selectors as clean and simple and clear as possible. The same goes for nesting selectors for me. I usually don't go more than one or two levels deep.
Where I might us them is where I can't control the HTML very easily. If I was using an API that was giving me HTML, or maybe a plugin on Wordpress that output it's own HTML, and I wanted to select elements from within that code, I'd use one of these types of selectors to do so, depending on the structure and what I needed.
The other reason I might use them is to override other styles based on specificity. But if I have control of the html I'd rather do it that way.
mrx3
8,742 PointsThanks Kevin for the information. I was thinking the same thing "add complexity." I'm with you when about keeping things clean and simple. Great information thanks again, and have a good weekend.
James Barnett
39,199 Points> I don't hardly use them, and the biggest reason is they start to add complexity.
You don't hardly use the child selector? I use the child selector with lists for example at least as frequently as using attribute selectors.
Kevin Korte
28,149 PointsLet me clarify. The child selector is awesome at targeting lists, maybe that unclassed span inside another element. Works well and .element > span is logical to read.
I was referring more to selectors like
h1 + p
h1 ~ p
Can't say I've used them once.
James Barnett
39,199 PointsKevin Korte - See my codepen links below to how I've used an adjacent selector in the past for those use cases. I gather using ::before is popular for CSS tooltips. I'm not sure about CSS checkboxes or an accordion widget.
mrx3
8,742 Pointsmrx3
8,742 PointsHi James. Thanks for the links. The Widget is cool, as well as the Tooltip. Your examples are not complex at all. You just added a lines, really cool. Thanks again for helping me James!