Hassle-free Full Bleed with *:not()

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Common situation documented by Dave Rupert:

Let’s say you’re making a blog post layout. Content is entered into a CMS inside a WYSIWYG editor field. You echo that content to the page. You pull it up on a mobile device and notice the paragraphs go edge-to-edge. Yikes, it’s a little uncomfortable. So you add some kind of left/right padding maybe using a div.container.

This works great until the client asks for the images and video to go full bleed. Your universal padding solution no longer works well.

You got options. Containerizing isn’t great in any scenario. So how do you yank out those full bleed elements? Dave does it with what I’d call a reverso-whitelist. Say you want images and videos to be full bleed, but everything else needs edge padding:

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

He’s using :not() to select everything that isn’t an image or video. Those things are the whitelist. Much easier the other direction of maintaining a blacklist of every single possible HTML element.

I use this right here on CSS-Tricks in this design, but instead of applying padding to everything, I use a container and pull out a whitelist of items to the edge with negative margins. I think I like Dave’s idea better.

Direct Link →