Using nth-child css on dynamic React table

Question

I'm having trouble getting the nth-child or nth-of-type selectors to take effect in a list of divs.

I'm working in a React app and have a component representing a single item in a collection that renders the following HTML structure:

<div className="link-row">
  <div className="link-row-header-container">
    <div className="header-name"></div>
    <div className="header-info"></div>
  </div>
  <div className="link-container">
    <div className="left-inner-container"> //this is the container i'm trying to select  
    </div>
    <div className="right-inner-container">
    </div>
  </div>
  <div className="link-row-footer-container">
    <span> footer stuff </span>
  </div>
</div>

I have a function in an outer component mapping the above component over a collection of data and placing them in a single <div> like so:

<div> {linkList} </div>

I'm trying to alternate the background color of "left-inner-container" in sequences of threes, but I'm consistently getting only a single color across all of them.

Here's my CSS:

.left-inner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #450037;
}

.left-inner-container:nth-of-type(3n+1) {background-color: #ff5e39;}
.left-inner-container:nth-of-type(3n+2) {background-color: #00d2d1;}
.left-inner-container:nth-of-type(3n+3) {background-color: #ffffff;}

kukkuz · Accepted Answer · 2017-09-05 02:46:09Z

It is obvious that you get all the colors same because left-inner-container is always the first-child of its parent container.

I propose to take your link-row container to target the nth-of-type selector. See a simplified html-CSS demo below:

.link-row {
  border-bottom: 1px solid red;
  background: #ddd;
}

.left-inner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #450037;
}

.link-row:nth-of-type(3n+1) .left-inner-container {
  background-color: #ff5e39;
}

.link-row:nth-of-type(3n+2) .left-inner-container {
  background-color: #00d2d1;
}

.link-row:nth-of-type(3n+3) .left-inner-container {
  background-color: #ffffff;
}

<div class="wrapper">

  <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>

    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
    <div class="link-row">
    <div class="link-row-header-container">
      <div class="header-name">header</div>
      <div class="header-info">info</div>
    </div>
    <div class="link-container">
      <div class="left-inner-container">left</div>
      <div class="right-inner-container">right</div>
    </div>
    <div class="link-row-footer-container">
      <span> footer stuff </span>
    </div>
  </div>
  
  
</div>

Now I feel pretty dumb. Misunderstood a fundamental to how the selector worked and had no idea you could select by class after the nth-child declaration so I must be missing a core CSS syntax concept as well. Time to do some reading. This solution worked, so thanks for the help!

Hassan Siddiqui · Accepted Answer · 2019-04-02 17:24:45Z

0

Just update the below CSS will resolve your issue. Thanks

.left-inner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #450037;
  background-color: #ff5e39;
}

.left-inner-container:nth-child(2) {background-color: #00d2d1;}
.left-inner-container:nth-child(3) {background-color: #ffffff;}

answered Apr 2, 2019 at 17:24

Hassan Siddiqui

2,8511 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using nth-child css on dynamic React table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related