I have a list of notes in a document, but occasionally I may include some document updates (such as "Document closed", "Revision made"...).
Here is the basic HTML structure of a document and its notes:
<p class="document-note">My note</p>
<p class="document-note">Another note</p>
<p class="document-note">Third note</p>
If a note includes any updates, the HTML can appear like this:
<p class="document-note">My note</p>
<p class="document-update">Update</p>
<p class="document-update">Another update</p>
<p class="document-note">Another note</p>
<p class="document-update">Additional update here</p>
<p class="document-note">Third note</p>
If a document-update follows another document-update, I want to apply special styling to it (like reducing the margin on the bottom of the first item).
For example:
<p class="document-note">My note</p>
<p class="document-update">Update</p> <== A document-update comes after this item, apply special CSS only to this item
<p class="document-update">Another update</p>
<p class="document-note">Another note</p>
<p class="document-update">Additional update here</p> <== This document-update stands alone (no other document-update after this item), so no special CSS is needed here
<p class="document-note">Third note</p>
Is there a way to achieve this?
I've attempted using .document-update + .document-update, but it hasn't given me the desired outcome.
Update I've included the CSS I currently have and what I tried to accomplish:
.document-note, .document-update {
padding: 15px;
margin-bottom: 15px;
}
/* This styling should be applied only to elements followed by another .document-update as shown in my example above */
.document-update + .document-update {
margin-bottom: 3px;
}
/* Custom classes such as changing color on .document-update */
/* ... */
Update #2 This is the effect I am aiming for (demonstrated with inline styles in the DOM): https://i.sstatic.net/OTWrV.png