Basically, I have a list of

tags from a WYSIWYG editor that have a margin-bottom of 20px. However, if the sibling of the

tag has an tag, I would like to remove that margin so that the tag can set the margin. How would I do this?

This is my styling

.wysiwyg {
p {
    margin-bottom: 20px;
}
}

Basic markup

<div class="wysiwyg">
    <p></p>
    <p></p>
    <p></p>
    // Styling must stop here so that there is no bottom margin from the first above <p> tag
    <img />
    <p></p>
    <p></p>
    <p></p>
</div>

CodePudding user response：

You can use tilde ~, it will select all element after the current selector, and then reset the rule of all p after the img:

.wysiwyg {
  p {
    margin-bottom: 20px;
  }
  img ~ p {
    margin-bottom: 0;
  }
}

Here a demo

.wysiwyg p {
  margin-bottom: 20px;
  background-color: red;
}

.wysiwyg img ~ p {
  margin-bottom: 0;
  background-color: transparent;
}

<div class="wysiwyg">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <img />
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

More information can be found here

CodePudding user response：

Just set a negative margin-top for img tags that are preceded by a p tag:

.wysiwyg {
    p {
        margin-bottom: 20px;
    }
    p   img {
        margin-top: -20px;
    }
}