target practice 1 start

index.html

<section id="numbers">
  <ul>
    <li><span class="low">1</span></li>
    <li>2</li>
    <li><span class="low">3</span></li>
    <li>4</li>
    <li><span class="low">5</span></li>
  </ul>
</section>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Verdana;
  color: #222;
}

/*descendent selector*/

section#numbers ul {
  width: 8in;
  margin: 72px auto;
}

section#numbers li {
  list-style: none;
  width: 1.5in;
  height: 1.5in;
  text-align: center;
  background-color: #333;
  color: white;
  font-size: 80px;
  display: inline-block;
}

section#numbers li:first-child {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

/* add a declaration for radius on the last li*/
section#numbers li:last-child {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}


/* add a declaration with a contextual selector to position (relative) any li with a class of low*/
section#numbers li .low{
  position:relative;
  top:50px;
}

/* add a filter so there is no longer a reason to use the .low class using the following syntax: */
section#numbers ul li:nth-child(even) {
  position:relative;
  top:50px;
}

target practice 1 start.markdown

target practice 1 start

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.