How to break elements outside of their container with CSS

View the source files on Github.

Did you find this post useful? Show some love!

Hey Gilvando, not sure I follow your question exactly, does this make sense below?


// These styles will only be applied to the child elements
// not the grandchild
.c-article__content > * {
  margin-right: auto;
  margin-left: auto;


<div class="c-article__content">
  <p>...</p> <!-- child -->
  <p>...</p> <!-- child -->
  <figure> <!-- child -->
    <img src="" alt=""> <!-- grandchild -->
  <p>...</p> <!-- child -->
  <blockquote> <!-- child -->
    <p>...</p> <!-- grandchild -->
  <p>...</p> <!-- child -->
  <p>...</p> <!-- child -->
Classic DEV Post from Feb 24

What little things make you happy while coding?

I must say refactoring code to make it look beautiful is my guilty pleasure ...

Follow @gonzalezanguita to see more of their posts in your feed.
Alex Carpenter
I’m a front-end developer focused on performance and accessibility.
More from @hybrid_alex
How to implement a button loading state with CSS
Three tips for writing better CSS
Trending on
What are your programming blogs?
When is code "too clever" / how do you think about readability/cognitive load?
Which contentious opinions in programming actually matter?
#discuss #webdev #programming #grannyrulescomments
What are the first differences you noticed in GitHub after Microsoft bought it? Post here yours!
#github #microsoft #discuss
Follow Friday!
What's your approach to fixing a "long-term" hairy bug?
Does anyone else feel bothered when people term us as coders instead of developers or programmers..?
How do you get a decent estimate on the time it will take to complete a task?
#discuss #work