Styling of Even/Odd Divs in Reactjs

Question

I am trying to style the odd and even classes but the code is not working as intended. Its styling all the classes as one. This will be more understandable through my code and output. OUTPUT: CODE:

 .b1-segment:nth-child(even).description-wrapper{ color: white; float: left; }.b1-segment:nth-child(odd).description-wrapper{ color: black; float: right; }

 {getallservices.map((service) => { return( <> <Fade bottom> <section className="services banner-page about b1-segment bg-fx" style={{ backgroundImage: `url(${service.imgDesk.fluid.src})` }}> <Container> <Row> <Col md={12}> <div className="description-wrapper"> <h3>{service.servicesHeading}</h3> <p>{service.description.description}</p> </div> </Col> </Row> </Container> </section> </Fade> </> ) })}

Answer 1

Within <Fade bottom> .b1-segment is the only child. So .b1-segment:nth-child(odd) will always be selected.

If you want to select .b1-segment as direct child you have to make the section tag as main wrapper. Then .b1-segment will be considered as child within where it's rendering and your css will work.

  {getallservices.map((service) => {

          return(
            <>
              <section className="services banner-page about  b1-segment bg-fx" style={{ backgroundImage:   `url(${service.imgDesk.fluid.src})` }}>
                <Fade bottom>
                  <Container>
                    <Row>
                      <Col md={12}>
                          <div className="description-wrapper">
                              <h3>{service.servicesHeading}</h3>
                              <p>{service.description.description}</p>  
                          </div>
                      </Col>
                    </Row>
                  </Container>
                </Fade>
              </section>
            </>
          )
        })}