Sylar Sylar - 8 months ago 74
CSS Question

Prevent css from appying to first rendered object in array

I want to apply a

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, i) {
let borderCss = "top-border-css";
let noBorder = "no-border-css";
<div key={}>
<div className={data.length === 1 ? noBorder : borderCss}>

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.


Use :first-child in your css

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