How to apply different color to each child in navigation using CSS

Question

I am working with HTML and CSS and I am trying to change color of first child in navigation. I am trying to achieve that all items in my navigation are in different colors and when hover on them that they rotate to side a bit. Great example is on this website here: https://www.templatemonster.com/demo/54875.html

Here is my navigation code:

.navigation li {
  display: inline-block;
}

.navigation li:nth-child(1) {
  background: #ffc200;
}

.navigation a {
  color: #FFF;
  white-space: nowrap;
  padding: 25px 29px 31px;
}

.navigation a:hover,
.navigation a.active {
  color: #fff;
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

<nav class="navigation" role="navigation">
  <ul class="primary-nav">
    <li><a href="#intro">About</a></li>
    <li><a href="#services">services</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#teams">Our Team</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Navigation in my project is also fixed on scroll like in example.

And what is the specific problem? If it’s the missing rotation: duplicate of [CSS transform doesn't work on inline elements](https://stackoverflow.com/q/14883250/4642212). — Sebastian Simon, Oct 20 '17 at 20:01

Yousaf · Accepted Answer · 2021-06-02T04:31:44.770

You can target each child using li:nth-child() and achieve your other goal of rotating them using transform: rotate(5deg);

.navigation li {
  display: inline-block;
}

.navigation a {
  white-space: nowrap;
  padding: 25px 29px 31px;
}

li:nth-child(1) a { background: #636393; }
li:nth-child(2) a { background: #B5222D; }
li:nth-child(3) a { background: #D4953C; }
li:nth-child(4) a { background: #609491; }

li:hover{
  transform: rotate(5deg);
}

<nav class="navigation" role="navigation">
  <ul class="primary-nav">
    <li><a href="#intro">About</a></li>
    <li><a href="#services">services</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#teams">Our Team</a></li>
  </ul>
</nav>

score 1 · Answer 2 · answered Oct 20 '17 at 20:02

Based on the code of the other site.. This would be the transformation that you are looking for.

.navigation li {
    display: inline-block;
}

.navigation li:nth-child(1){
    background: #ffc200;

}
.navigation a {
    color: #FFF;
    white-space: nowrap;
    padding: 25px 29px 31px;
}
.navigation a:hover, .navigation a.active {
    color: #fff;
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}
.navigation li:hover{
    -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

<nav class="navigation" role="navigation">
        <ul class="primary-nav">
          <li><a href="#intro">About</a></li>
          <li><a href="#services">services</a></li>
          <li><a href="#works">Works</a></li>
          <li><a href="#teams">Our Team</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>

score 0 · Answer 3 · answered Oct 20 '17 at 20:11

So to start of I am using :nth-child() pseudo selector to set the colors of the different element!

.navigation li:nth-child(1) {
  background: gray;
}

Then to rotate the div, I think its better if we add the :hover pseudo selector to the li tag instead of the a tag since the transform will happen on mouse over of the entire div instead of only the a tag. The corresponding CSS class for that is.

.navigation li:hover,
.navigation li:active {
  color: #fff;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

I have also added the text-decoration:none to the a tag to remove the underline which is present by default.

Please refer to the below snippet and let me know if there are any issues!

.navigation li {
  display: inline-block;
}

.navigation li:nth-child(1) {
  background: gray;
}

.navigation li:nth-child(2) {
  background: magenta;
}

.navigation li:nth-child(3) {
  background: purple;
}

.navigation li:nth-child(4) {
  background: orange;
}

.navigation li:nth-child(5) {
  background: red;
}

.navigation li:nth-child(6) {
  background: lightblue;
}



.navigation a {
  color: #FFF;
  white-space: nowrap;
  padding: 25px 29px 31px;
  text-decoration:none;
}

.navigation li:hover,
.navigation li:active {
  color: #fff;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

<nav class="navigation" role="navigation">
  <ul class="primary-nav">
    <li><a href="#intro">About</a></li>
    <li><a href="#services">services</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#teams">Our Team</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

happymacarts · Answer 4 · 2017-10-20T20:23:01.637

This should get you started on what you want (if i understand your question correctly) Most of this code was copied from the link you supplied

the main difference in this code from the other answers is the background rotates but NOT the text

ol,ul {
  list-style: none;
}

/*each of your colors can be set here*/
.sf-menu>li:nth-child(1):after {
  background: #ffc200;
}
.sf-menu>li:nth-child(2):after {
  background: red;
}
.sf-menu>li:nth-child(3):after {
  background: green;
}
.sf-menu>li:nth-child(4):after {
  background: blue;
}
.sf-menu>li:nth-child(5):after {
  background: blueviolet;
}


.sf-menu>li {
  position: relative;
  float: left;
  z-index: 0;
  margin: 0 20px;
}

.sf-menu {
  display: inline-block;
}

.sf-menu>li>a {
  font-size: 18px;
  line-height: 28px;
  padding: 11px 15px;
}

.sf-menu>li>a {
  color: #FFF;
  font: 600 24px/35px "Raleway", sans-serif;
  white-space: nowrap;
  padding: 25px 29px 31px;
  text-decoration: none;
}

.sf-menu:before,
.sf-menu:after {
  display: table;
  content: "";
  line-height: 0;
}

.sf-menu a {
  display: block;
}

.sf-menu>li:after {
  content: '';
  position: absolute;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  outline: 1px solid transparent;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.sf-menu>li.sfHover:after,
.sf-menu>li:hover:after,
.sf-menu>li.active:after {
  -moz-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<nav class="nav">
  <ul class="sf-menu">
    <li class="active">
      <a href="./">Home</a>
    </li>
    <li class="">
      <a href="index-1.html">About school</a>
    </li>
    <li class="">
      <a href="index-2.html">Class schedules</a>
    </li>
    <li>
      <a href="index-3.html">Kids' art gallery</a>
    </li>
    <li>
      <a href="index-4.html">Contacts</a>
    </li>
    <li>
      <a href="index-4.html">link</a>
    </li>
  </ul>
</nav>

How to apply different color to each child in navigation using CSS

4 Answers4