How to break elements outside of their container with CSS

View the source files on Github.

Comments

[Alex Carpenter]

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>