nth-child(valor)

by J. Vázquez

HTML

<p class="tituloCoches">Marcas de coches</p>
<ul class="listaCoches">
	<li>Ford</li>
	<li>Volvo</li>
  <li>BMW</li>
  <li>Mercedes</li>
  <li>Kia</li>
  <li>Nissan</li>
  <li>Honda</li>
  <li>Toyota</li>  
</ul>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
* {
  font-family: 'Lato', sans-serif;
}
.tituloCoches {
  font-size:20px;
  color:#70b3ad;
}
.listaCoches {
  max-width: 300px; 
}
.listaCoches li {
  list-style:none;
  padding:10px;
}
.listaCoches li:nth-child(3) { 
  background:#70b3ad;
  color:#fff;
}
.listaCoches li:nth-child(1), .listaCoches li:nth-child(5) { 
  background:#F6C036;
  color:#fff;
}

.listaCoches li:nth-child(2), .listaCoches li:nth-child(6) { 
  background:#e8e8e8;
  color:#000;
}