Prevent css from appying to first rendered object in array

Question

I want to apply a border-top style when there are more than one array objects. Not sure how to word it but see what I want:

When there is just one card (one array). Line represents the border top:

content 1

More than one content:

content 1

_______________

content 2

_______________

content 3 etc

As you can see, no border is present when there is just one array, when more than one, the border top shows. What Ive done is that the border-top is being applied to all content. How to get what I want?

React es6:

let data = [{id: 1, a: "car"}, {id: 2, a: "van"}, {id: 3, a: "truck"}];

return data.map(function(p, i) {
  let borderCss = "top-border-css";
  let noBorder = "no-border-css";
  return(
    <div key={p.id}>
      <div className={data.length === 1 ? noBorder : borderCss}>
        {p.a}
      </div>
    </div>
  )
}

What Im getting is that the border-top is being applied to the first content. I dont what that. It should not be applied to the first but rather the rest.

Craig1123 · Accepted Answer · 2016-10-21T19:35:22.257

3

Use :first-child in your css

div { border-top: 1px solid #000; }
div:first-child { border-top: none; }

edited Oct 21 '16 at 19:35

answered Oct 21 '16 at 19:19

Craig1123

1,510
2
17
25

Next time check if same answer exists first :) – Dekel Oct 21 '16 at 20:10
My question was not clear enough but this is what I needed: http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class Ill accept your answer as it works based on my example. – Sylar Oct 21 '16 at 20:34
@Dekel We commented at the exact same time. And mine is simpler ;) – Craig1123 Oct 21 '16 at 21:36

score 0 · Answer 2 · answered Oct 21 '16 at 19:18

You can use css first-child for that.

Add border-top on all child elements and remove that border on the first one.

div.add-borders {
  border: 1px solid black;
  width: 200px;
  margin: 20px;
}
div.add-borders div {
  border-top: 1px solid red;
}
div.add-borders div:first-child {
  border-top: none;
}

<div class="add-borders">
  <div>a</div>
</div>
<div class="add-borders">
  <div>a</div>
  <div>b</div>
</div>
<div class="add-borders">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

Prevent css from appying to first rendered object in array

2 Answers2