Search code examples
csspseudo-element

Pseudo-Element Line Break, how to change last-child?

I do have a list of notes where I added the Pseudo-Element to have a double line break at the end, like this:

.note-right small::after { 
  content: "\a\a";
  white-space: pre
 }

Now, I want the last one of these notes without line breaks at the end, so I'm trying:

 .note-right small:last-child { 
   content: none;
  }

But it doesn't work. What I'm missing?

Thanks!

Solution

  • You forgot the :after part. Also, make sure that the actual last-child of its parent is targeted by the selector.

    .note-right small::after {
  content: "zzz";
  white-space: pre;
}

.note-right:last-child small::after {
  content: none;
}
    <div class="my-container">
  <div class="note-right"><small>A</small></div>
  <div class="note-right"><small>A</small></div>
  <div class="note-right"><small>A</small></div>
  <div class="note-right"><small>A</small></div>
  <div class="note-right"><small>A</small></div>
</div>