Use CSS to select the first and last element from groups of similar elements

I have this CSS

div {
  width: 300px;
  text-align: center;
}
p:not(.vrt) {
  text-align: left;
}
p.vrt {
  writing-mode: vertical-rl; 
  display: inline-block;
}
div :nth-child(1 of p.vrt) {
  margin-left: 0;
}
div :nth-last-child(1 of p.vrt) {
  margin-right: 0;
}

for this HTML

  <div>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
  </div>

The number of p and p.vrt elements can vary. For example, there might be none, just one, of multiple groups of 5 or more contiguous p.vrt elements.

What I need to be able to do is to CSS select just the first p.vrt element (in a group of p.vrt elements) and another selects just the last p.vrt element (in a group of p.vrt elements.) Currently my CSS selects the very first and the very last elements. In the sample above the "first" CSS would select the 1st and the 4th p.vrt, and the "last" CSS would select the 3rd p.vrt and the 4th p.vrt.

Solution

For the first element within each "group" you can use

:not(p.vrt) + p.vrt

That selects every p.vrt element whose previous sibling is not a p.vrt element.

And for the last, you can use

p.vrt:not(:has(+ p.vrt))

That selects every p.vrt, that does not have a p.vrt sibling coming after it.

div {
  width: 300px;
  text-align: center;
}

p:not(.vrt) {
  text-align: left;
}

p.vrt {
  writing-mode: vertical-rl; 
  display: inline-block;
}

:not(p.vrt) + p.vrt {
  margin-left: 0;
  color: #F0A;
}
p.vrt:not(:has(+ p.vrt)) {
  margin-right: 0;
  color: #FA0;
}

<div>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p>This is some sample text which is not meant to be read.</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
    <p class="vrt">幾見本言葉</p>
  </div>