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

Time:08-22

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!

CodePudding user response:

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 >
  <div ><small>A</small></div>
  <div ><small>A</small></div>
  <div ><small>A</small></div>
  <div ><small>A</small></div>
  <div ><small>A</small></div>
</div>

  • Related