nth-child(even) doesn't work, but odd work

Question

I would like to add a css for .st--player-box, that even numbers had value float: right;, and odd numbers had a float: left;

<div class="st--players-container">
        <a href="#">
            <div class="st--player-box">...</div>
        </a>
            <a href="#">
            <div class="st--player-box">...</div>
        </a>
            <a href="#">
            <div class="st--player-box">...</div>
        </a>
            <a href="#">
            <div class="st--player-box">...</div>
        </a>
</div>

I make a this code in CSS, but I don't know, why this is doesn't work.

.st--players-container .st--player-box {
  display: block;
  width: -webkit-calc(47%);
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 0 5px 10px 5px;
  overflow: hidden;
}
.st--players-container .st--player-box:nth-child(odd) {
  float: left;
}
.st--players-container .st--player-box:nth-child(even) {
  float: right;
}

All `
` are first children within their ``, so they are all odd children. Did you mean `.st--players-container > a:nth-child(odd) > .st--player-box`? — Sebastian Simon, Sep 10 '18 at 14:44

score 0 · Answer 1 · answered Sep 10 '18 at 14:46

Because div.st--player-box is not root child of div.st--players-container. You need to target root child element <a>...</a>

.st--players-container .st--player-box {
  display: block;
  width: -webkit-calc(47%);
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 0 5px 10px 5px;
  overflow: hidden;
}
.st--players-container a:nth-child(odd) {
  float: left;
}
.st--players-container a:nth-child(even) {
  float: right;
}

Here is an working example

nth-child(even) doesn't work, but odd work

1 Answers1