0

I have the following HTML code:

<p class="message">
     Hi there
     <span class="emoji-native"></span>
     this is cool!
     <span class="emoji-native"></span>
     <span class="emoji-native"></span>
<p>

I want to add a margin: 0 3px; for all .emoji-native nodes and I also want to set margin-left: 0px for immediate next .emoji-native node.

This is the CSS code I have:

.emoji-native {
      margin: 0 3px;
}
.emoji-native + .emoji-native {
      margin-left: 0px;
}

It works well when I have multiple emojis next to each other (exactly what I want), but, if I have text between emojis, it will also affect the last emoji, meaning the + operator does not count :text elements as nodes and just ignores them.

Is there a way to do this without wrapping the text contents into another <span> tag?

Thanks.

Maurício Giordano
  • 3,116
  • 4
  • 32
  • 60

1 Answers1

1

There currently is no way to reference text nodes in css, see this thread: Is there a CSS selector for text nodes?

There is an open draft for the w3c, though i don't know if they'll implement it: https://github.com/w3c/csswg-drafts/issues/2208

Hope this answers your question. I guess the best you can do really is wrapping each text content in its own <span> tag.

freb97
  • 26
  • 2