Davabo Davabo - 29 days ago 9
Sass (Sass) Question

Selecting flex items using nth-child inside li tag

From the code below, I have 2 li's inside a ul tag. Each of these li's contain 2 divs, both these divs are wrapped in an anchor tag. The anchor tag is the flex container, and the divs's inside are the flex items.

Everything is working nicely, but I'm trying to select

<a>
element in the
<li>
elements that are
:nth-child(even)
. I want to add the following property
flex-direction: row-reverse;
to the anchor.

For whatever reason they are not being picked up, I think this has to do with the fact im wrapping the divs in an anchor tag?

Code Below:

SCSS:

.locals {
li {
list-style-type: none;

a.person {
display:flex;
text-decoration: none;

.bg {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

& > div:first-child {
flex: 1;
}

& > div:last-child {
flex: 1;
padding: 80px 0;

h2 {
text-align:center;
color: $gold;
font-size:20px;
}
p {
text-align:center;
color: $gold;
}
}
}
}

li:nth-child(even) {
a.person {
flex-direction: row-reverse;
}
}
}


HTML:

<ul class="locals">
<li>
<a class="person" href="">
<div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
</div>
<div>
<h2> Test </h2>
<p> Test </p>
</div>
</a>
</li>
<li>
<a class="person" href="">
<div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
</div>
<div>
<h2> Test </h2>
<p> Test </p>
</div>
</a>
</li>

Answer

Correct the following:

  • Add missing </ul> closing tag.
  • Declare $gold variable.

Code Snippet: (Compiled CSS)

.locals li {
  list-style-type: none;
}
.locals li a.person {
  display: flex;
  text-decoration: none;
}
.locals li a.person .bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.locals li a.person > div:first-child {
  flex: 1;
}
.locals li a.person > div:last-child {
  flex: 1;
  padding: 80px 0;
}
.locals li a.person > div:last-child h2 {
  text-align: center;
  color: gold;
  font-size: 20px;
}
.locals li a.person > div:last-child p {
  text-align: center;
  color: gold;
}
.locals li:nth-child(even) a.person {
  flex-direction: row-reverse;
}
<ul class="locals">
  <li>
    <a class="person" href="">
      <div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
      </div>
      <div>
        <h2> Test </h2>
        <p>Test</p>
      </div>
    </a>
  </li>
  <li>
    <a class="person" href="">
      <div class="bg" style="background-image:url('http://placehold.it/350x150'); ">
      </div>
      <div>
        <h2> Test </h2>
        <p>Test</p>
      </div>
    </a>
  </li>
</ul>


Revised jsFiddle