How to use :nth-child for alternate rows [duplicate] - html

Question

This question already has answers here:
How can I style even and odd elements?
(9 answers)
Closed 3 years ago.
I want to style my accordion with border-top and border-bottom for even number of rows Ex: 2, 4 ,6 etc.
I tried with :nth-child but it is not reflecting my parent div but it is reflecting my child element.
code
<div className="accordion" id="adsdfsdf">
<div className="accordionitem">
<div className="accordion-card">
<div className="accordion-card-header" id="aada">
<h3 className="mb-0 w-100">
<a
className="collapsed"
role="button"
>
<span className="icon-left">
<i className=" a-minus" />
<i className="a-plus" />
</span>
</a>
</h3>
</div>
</div>
</div>
<div className="accordion" id="adsdfsdf">
<div className="accordionitem">
<div className="accordion-card">
<div className="accordion-card-header" id="aada">
<h3 className="mb-0 w-100">
<a
className="collapsed"
role="button"
>
<span className="icon-left">
<i className=" a-minus" />
<i className="a-plus" />
</span>
</a>
</h3>
</div>
</div>
</div>
css
.accordion-card-header {
boder-top: 1px solid red;
border-bottom: 1px solid red;
}

Answer 1

You are almost there. you need to use :nth-child(even) to style even rows and :nth-child(odd) to style odd rows. For the further reference you can go through nth-child() Selector
Here is a small demo
div:nth-child(odd) {
height: 100px;
width: 100px;
background: yellow;
margin: 20px auto;
}
div:nth-child(even) {
height: 100px;
width: 100px;
background: green;
border-top: 5px solid black;
border-bottom: 5px solid red;
margin: 20px auto;
}
<div>odd</div>
<div>even</div>
<div>odd</div>
<div>even</div>