Apply parent style to specific child only-CodePudding

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 >
  <div ></div>
  <div ></div>
  <div ></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

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

As-per your request - without flex/grid:

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

CodePudding user response：

CSS nth-child(n) let's you select a specific child of a parent.

.ctr>*:nth-child(1) {
  text-align: start;
}

.ctr>*:nth-child(2) {
  text-align: center;
}

.ctr>*:nth-child(3) {
  text-align: end;
}

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

<div >
  <div >box 1</div>
  <div >box 2</div>
  <div >box 3</div>
</div>

CodePudding user response：

Use the :first-child, :last-child, and :nth-child pseudo-classes in your specific case, but on the "box" class, not on the "ctr" class itself.

.box:first-child {
    text-align: left;
    }
.box:nth-child(2) {
    text-align: center;
}
.box:last-child {
    text-align: right;
}

If you have multiple items and want a default one, you can put a "default" value. In the following example you can have more than three "box" divs and all except the first and last would be centered.

.ctr .box {
    text-align: center;
}
.box:first-child {
    text-align: left;
}
.box:last-child {
    text-align: right;
}

Note that there are a number of approaches to this, but if you follow this approach, the ordering of the CSS DOES matter. For example, if you put the ".ctr .box" line at the bottom then ALL values will be center aligned.

CodePudding user response：

If you want to space the boxes out, you can use flex (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). You can replace space-between with space-around to add more space on the left and on the right.

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

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

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

This is an example of doing it without flex:

body {
  margin: 16px
}

.box {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

.box:first-child {
  position: absolute;
}
.box:nth-child(2) {
  margin: 0 auto;
}
.box:last-child {
  position: absolute;
  top: 16px;
  right: 16px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>