JSFiddle - React, Tailwind, and code Playground

HTML

<p class="p">
	          <span>A </span>
	          <span>B </span>
		                  <sup>1 </sup>
		                  <sup class='s'>2 </sup>
		                  <sup>3 </sup>
	          <span>C </span>
	          <span>D </span>
		  <sub>1</sub>
		  <sub>2</sub>
		  <sub>3</sub>
	          <span>E</span>
	          <span>F</span>
</p>

CSS

.p {
  font-size: 4em;
}

/* ----------------:first-child---------- */

.p :first-child {                          /*стиль первого дочернего элемента родителя*/
  background: red;
}

/* -----------------:first-of-type-------- */

.p sup.s:first-of-type {                     /*дочерний своей группы элементов*/
  background: green;
}
.p sub:first-of-type {                     /*дочерний своей группы элементов*/
  background: blue;
}

/* ----------------:last-child------------ */

.p :last-child {                           /*стиль последнего дочернего элемента родителя*/
  background: red;
}