LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




CSS
li:nth-last-child(5):first-child, li:nth-last-child(5):first-child ~ li {
  background-color: #FCC;
}
li:nth-last-child(n + 6):first-child, li:nth-last-child(n + 6):first-child ~ li {
  background-color: #CFC;
}
li:nth-last-child(-n + 4):first-child, li:nth-last-child(-n + 4):first-child ~ li {
  background-color: #CCF;
}
li:nth-last-child(n + 5):nth-last-child(-n + 6):first-child, li:nth-last-child(n + 5):nth-last-child(-n + 6):first-child ~ li {
  box-shadow: inset 0 0 0 .5rem #FFA;
}

nav {
  counter-reset: li;
  font-size: 0;
  margin: 1rem;
}

li {
  counter-increment: li;
  display: inline-block;
  font-size: 1rem;
  padding: 1rem;
  border: 1px solid black;
}
li:before {
  content: counter(li);
}
li + li {
  border-left-width: 0;
}
Host Instantly Drag and Drop Website Builder

 

Description

Inspired by this article : http://alistapart.com/article/quantity-queries-for-css/login-return
Term
Wed, 11/29/2017 - 11:30

Related Codes

Pen ID
Pen ID
Pen ID