Apply parent style to specific child only

Issue

Is it possible to achieve something like this?

.ctr {
  text-align: start; // Apply to first child
  text-align: center; // Apply to second child
  text-align: end; // Apply to third child
}

.box {
  width: 20px;
  height: 20px;
  margin: 8px;
  display: inline-block;
  background-color: yellow;
}

<div class="ctr">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Since the box are inline-block, they respect the text-align property.

Now I would like to apply text-align: start to the first box, text-align: center to the second box and so on...

Expected Result

Solution

To evenly-spread the children (across the horizonal axis)

You can use flexbox on the parent (.ctr) as shown below:

.ctr {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 20px;
  height: 20px;
  margin: 8px;
  display: inline-block;
  background-color: yellow;
}

<div class="ctr">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

---

As-per your request - without flex/grid:

.ctr {
  text-align: justify;
}
.ctr::after {
  content: '';
  display: inline-block;
  width: 100%;
}

Answered By - vsync