Can you control or target the style of a wrapped element?

Question

Consider the following example where I have several inline-block elements in a container element that will potentially shrink in width to the point where the elements within it will wrap.

I would like for there to be a small bit of space between each "row" or contained elements. Using a margin-top or margin-bottom I get the space that I want. However, there is a small bit of space either on the first or last row of elements.

Is there a way to target the line wrapped elements but not the first line?

#container {
  width: 10em;
  background-color: blue;
}
#container > span {
  display: inline-block;
  padding: 0.25em;
  margin: 0;
  background-color: lightblue;
}
#container > span:not(:last-child) {
  margin-right: 0.25em;
}
/*The following rule doesn't exist*/

#container > span:not(:first-row) {
  margin-top: 0.25em;
}

<div id="container">
  <span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>

Answer 1

Is there a way to target the line wrapped elements but not the first line?

No, not as of now.

However, there is a small bit of space either on the first or last row of elements.

In most situations, you should be able to mitigate that by a negative margin on the container element, like so:

#container {
  width: 10em;
  margin-bottom: -0.25em;
  background-color: blue;
}
#container > span {
  display: inline-block;
  padding: 0.25em;
  margin: 0 0 .25em 0;
  background-color: lightblue;
}
#container > span:not(:last-child) {
  margin-right: 0.25em;
}

.test { background:red; }

<div id="container">
  <span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
<div class="test">I am where I should be.</div>

(Added the red div to show that there’s no offset between it and the previous element.)

Answer 2

You can't target a bunch of spans as a row, especially if they're just wrapping when they don't fit on one line anymore.

You'd need to wrap the content in <div class="row"> for example. Then you could say .row:first-child { /* Custom styling */ }.

This might be possible in the future, but as it stands it can't be done.