DEV Community

Alex Carpenter
Alex Carpenter

Posted on

How to break elements outside of their container with CSS

#css #howto

View the source files on Github.

Top comments (2)

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>