1

I have the following code

<p>Test
  <sup>1</sup>
  <sup>, 2</sup>
</p>

Which are displayed like 1 , 2. When I try apply some style I don't know where, since no margins or paddings are set. So, which style should I apply for all but the first sup?

Kameron
  • 10,240
  • 4
  • 13
  • 26
LeO
  • 4,238
  • 4
  • 48
  • 88
  • Alternative idea: just use one `sup` – Adam Jenkins Jun 22 '22 at 14:12
  • One element cannot be used since I need to store more information in it. I need to have two different elements. – LeO Jun 22 '22 at 14:37
  • `One element cannot be used since I need to store more information in it` This doesn't make any sense. If you need links you can do `1,2`. You're trying to solve your problem the hard way. – Adam Jenkins Jun 22 '22 at 18:17

3 Answers3

2

You can try just using one sup. If you need two, you can also try applying a negative margin on sup. Since you don't need it on the first-child but need it on all other children, use this:

p > sup:not(:first-child) {}

See it working here:

p>sup:not(:first-child) {
  margin-left: -4px;
}
<p>Test
  <sup>1,2,</sup>
  <sup>3</sup>
</p>

<p>Test
  <sup>1,</sup>
  <sup>2,</sup>
  <sup>3,</sup>
  <sup>4</sup>
</p>

<p>Test
  <sup>1,</sup>
  <sup>2,</sup>
  <sup>3,</sup>
  <sup>4,</sup>
  <sup>5,</sup>
  <sup>6,</sup>
  <sup>7,</sup>
  <sup>8</sup>
</p>
Kameron
  • 10,240
  • 4
  • 13
  • 26
  • I like approach the most. But some concerns: it won't apply to the first `p` Therefore I think the more appropriate version should be `p > sup:nth-child(2)`. Which is OK as long as I won't have more than 2 (i.e. n-elements). So how to apply if for `not(first)`? Because `p > sup:not(first-child)` applies it as well to the first (which I don't understand why?) – LeO Jun 22 '22 at 15:09
  • @LeO I only used `p:nth-child(2)` for demonstration purposes. Also, you need to add `:` in the `:not(:first-child)`. See this [fiddle](https://jsfiddle.net/kameronmayers/jm2kutox/2/), works like a charm. – Kameron Jun 22 '22 at 15:13
1

Does this solve your problem ?

<p>
    <sup>1, 2</sup>
</p>

If you have to use two elements, then try

<p>test
      <sup>1</sup>
      <sup style="margin:0; margin-left:-5; padding:0;">, 2</sup>
</p>

I hope I could help you, otherwise I'll need some more info.

Débart Rédouane
  • 130
  • 8
  • I need to place it within a `style` in a CSS. I cannot apply it directly on the element. I didn't think about the `margin-left` option. At least this is some kind of idea I need to check further. – LeO Jun 22 '22 at 14:40
  • See this question: https://stackoverflow.com/questions/8928194/span-sup-having-a-white-space-inbetween-caused-by-a-line-break – Camelopardalus Jun 22 '22 at 14:44
  • I think it will be fine if you add it in your css file, if you want to be sure that it will not affect other elements you can add an id attribute to your sup element and put the css rule using the id selector. I can edit my answer if my comment isn't clear – Débart Rédouane Jun 22 '22 at 14:50
1

Just place the comma inside the first <sup> element rather than in the subsequent ones like so:

<p>Test
  <sup>1,</sup>
  <sup> 2</sup>
</p>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Antonio Celano
  • 11
  • 3
  • Even more simple haven't thought about that kind of approach. I like this one very much. – LeO Jun 22 '22 at 20:12