5 ms·
> It's relatively easy to constrain all children, but CSS doesn't really have a mechanism to selectively constrain some children. Yes it does. You can use
by uallo 6y ago
> It's relatively easy to constrain all children, but CSS doesn't really have a mechanism to selectively constrain some children.
Yes it does. You can use
.wrapper h1, .wrapper p {}
or soon
.wrapper :is(h1,p) {}
Alternatively, you can also use
.wrapper > :not(.full-bleed) {}
And in SCSS (or similar) you can write
.wrapper { h1,p {} }
(edit: Earlier versions of this comment mentioned :has instead of :is)
- pupppet 6y agoI think the point being made was it's not easy to selectively have some children break out of a parent container with a max-width.
- deleted 6y ago[deleted]
- JoshTriplett 6y ago:has is not supported in any browser, and that seems unlikely to change, for performance reasons. https://caniuse.com/css-has https://caniuse.com/css-has
- err4nt 6y agoYou can support :has(), and things like it yourself via client-side JavaScript styling runtimes well enough.
- uallo 6y agoSorry, I meant :is (which is already supported in some browsers).
- ygra 6y agoSometimes it'd be great to have full XPath available for CSS selectors. But I can see how that's a performance nightmare.
- joshwcomeau 6y agoHi there! Author here. What I meant is that there is no way to tell certain children to disregard the constraints of a container; if a parent is 800px wide, there isn't a way to say "keep this child in-flow, but fill the viewport". The alternative you propose is problematic for a couple reasons: - I don't like "reaching in" to child elements. Especially in a component-focused architecture, it's a quick way to make a mess. My solution DOES reach in to apply a grid column, but that property only makes sense within the context of a grid, so it doesn't seem as problematic to me. - the `ch` unit doesn't work properly when applied individually to different elements; an `h1` with 65ch width is going to be much wider than a `p` with 65ch width. You need the width to be applied to the parent, so that it remains consistent - It's likely that you already have a constrained container, if you're adapting this solution to a page that already exists. If so, your approach isn't really workable without a major overhaul. I'd also just add, the nice thing about using Grid is that it's super extensible. If you want to add a sidebar, it's quick and straightforward.
- krsdcbl 6y agoI do see how op misread your intention, but would like to add that you did a very good job on addressing all these shortcomings and provide a neat solution with this tutorial - very good work!