Pseudo-classes 2

<ul>
 <li>Home</li>
 <li>About</li>
 <li>Services</li>
 <li>Contact</li>
</ul>

ul {
  list-style-type: none;
  margin: 0 0 40px -40px;
}
ul > li {
  display: inline-block;
  padding-right: 20px;
}
li:nth-child(2) {
  color: orange;
}

<h2>Planets of the Solar System</h2>
<ul>
 <li>Mercury</li>
 <li>Venus</li>
 <li>Earth</li>
 <li>Mars</li>
 <li>Jupiter</li>
 <li>Saturn</li>
 <li>Uranus</li>
 <li>Neptune</li>
</ul>

ul {
  list-style-type: none;
  margin-left: -40px;
}
li {
  padding: 10px;
}
li:nth-child(odd) {
  background-color: #f0f1f6;
}

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: lightgray;
  margin-right: 5px;
}
span:nth-child(n+3) {
  background-color: teal;
}