Sylar Sylar - 1 month ago 6
CSS Question

Prevent css from appying to first rendered object in array

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.

Answer

Use :first-child in your css

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