I iteration using css

Question

I have four grid blocks in my website. I need to paint red on first and last. Other 2 in the middle should be left as white.

How can I accomplish this without using Javascipt?

m4n0 · Accepted Answer · 2018-06-18 19:11:39Z

5

You can use CSS first-child and last-child property. Try running the snippet below.

.containers {
  height: 50px;
  width: 50px;
  border: 1px solid;
  display: inline-block
}

.containers:first-child,
.containers:last-child {
  background: red;
}

<div class="blocks">
  <div class="containers"></div>
  <div class="containers"></div>
  <div class="containers"></div>
  <div class="containers"></div>
</div>

edited Jun 18, 2018 at 19:11

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Jun 18, 2018 at 17:48

Polynomial Proton

5,18023 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sharon Over a year ago

Thanks guys, really helped.

justDan · Accepted Answer · 2018-06-18 17:52:29Z

2

You could also use nth-child here as well and target the blocks you want to.

.wrap {
  width: 100%;
}

.wrap div {
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 15px;
}

.wrap div:nth-child(1),
.wrap div:nth-child(4) {
  background: red;
}

<div class='wrap'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

answered Jun 18, 2018 at 17:52

justDan

2,3296 gold badges21 silver badges31 bronze badges

1 Comment

Sharon Over a year ago

Thanks Daniel, This technique is more generic...Thanks a lot.

Collectives™ on Stack Overflow

I iteration using css

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related