Question

I aplied transition to "ul > li > a" and I would like to turn off transition for last child (4th). Simply speaking i dont want "contact" to be affected by the transition

Any ideas ? I tried to trigger transition to a class but it doesn't work.

Cheers

HTML

<header id="header" class="main-header">
    <h1 class="name"><a href="#">Company</a></h1>
    <ul class="main-nav">
        <li><a class="button-menu" href="#header">About Us</a></li>
        <li><a class="button-menu" href="#products">Products</a></li>
        <li><a class="button-menu" href="#business">Our Business</a></li>
        <li><a class="button-menu contact-border" href="#contact">Contact</a></li>
    </ul>
</header>

CSS

.main-header > ul > li > a {
    position: relative;
}

.main-header > ul > li > a:before {
      content: "";
      position: absolute;
      width: 50%;
      height: 1px;
      bottom: 0;
      left: 25%;
      background-color: #868686;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

.main-header > ul > li > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

.main-header > ul > li:nth-child(4) {
  transition: none; <--???
}

Answer 1

Use not() selector to remove the nth-child(4) from the hover state:

.main-header>ul>li>a {
  position: relative;
  text-decoration:none;
}

.main-header>ul>li>a:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  bottom: 0;
  left: 25%;
  background-color: #868686;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.main-header>ul>li:not(:nth-child(4))>a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<header id="header" class="main-header">
  <h1 class="name"><a href="#">Company</a></h1>
  <ul class="main-nav">
    <li><a class="button-menu" href="#header">About Us</a></li>
    <li><a class="button-menu" href="#products">Products</a></li>
    <li><a class="button-menu" href="#business">Our Business</a></li>
    <li><a class="button-menu contact-border" href="#contact">Contact</a></li>
  </ul>
</header>

Answer 2

Change:

.main-header > ul > li:nth-child(4) { transition: none; }

To:

.main-header > ul > li:nth-child(4) > a:before { content: none; }

.main-header > ul > li > a {
    position: relative;
    text-decoration: none;
}

.main-header > ul > li > a:before {
      content: "";
      position: absolute;
      width: 50%;
      height: 1px;
      bottom: 0;
      left: 25%;
      background-color: #868686;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

.main-header > ul > li > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

.main-header > ul > li:nth-child(4) > a:before {
  content: none;
}

<header id="header" class="main-header">
    <h1 class="name"><a href="#">Company</a></h1>
    <ul class="main-nav">
        <li><a class="button-menu" href="#header">About Us</a></li>
        <li><a class="button-menu" href="#products">Products</a></li>
        <li><a class="button-menu" href="#business">Our Business</a></li>
        <li><a class="button-menu contact-border" href="#contact">Contact</a></li>
    </ul>
</header>

How to - Hidden transition on nth-child

2 个答案: