DEV Community

How to break elements outside of their container with CSS

Alex Carpenter on March 14, 2018

View the source files on Github.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
hybrid_alex profile image
Alex Carpenter • • Edited

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

CSS:

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

Markup:

<div class="c-article__content">
  <p>...</p> <!-- child -->
  <p>...</p> <!-- child -->
  <figure> <!-- child -->
    <img src="" alt=""> <!-- grandchild -->
  </figure>
  <p>...</p> <!-- child -->
  <blockquote> <!-- child -->
    <p>...</p> <!-- grandchild -->
  </blockquote>
  <p>...</p> <!-- child -->
  <p>...</p> <!-- child -->
</div>