I created the following CSS styles:
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;
}
to be used with this HTML structure:
<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 quantity of elements with classes p and p.vrt can vary. It could be none, one, or multiple groups containing five or more consecutive p.vrt elements.
My goal is to select only the first p.vrt element in a group and then select the last p.vrt element specifically. Currently, my CSS code selects both the initial and final elements within a group. In the provided example, the "first" CSS would target the 1st and 4th p.vrt elements, while the "last" CSS would focus on the 3rd and 4th p.vrt elements.