CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-element
Aurelian Spodarec
Aurelian Spodarec

Reputation: 154

How to remove last child in CSS of a nested pseudo element?

I have a structure that has a dropdown menu that expands 100%, which means the li can't be relative.

Now, I put a span inside the anchor tag, and that seems to work fine, however, I can't remove the last child of the orange bar, and if I try to do, it will remove all.

So how can I remove the last orange bar without breaking the hover of the project link?

Here is the codepen: https://codepen.io/Aurelian/pen/vjzOyJ?editors=1010

The HTML:

<ul class="site-nav-desktop__list">
    <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>home</span></a></li>
    <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>diensten</span></a></li>
    <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>over ons</span></a></li>
    <li class="site-nav-desktop__item site-nav-desktop__item--dropdown">
        <a href="" class="site-nav-desktop__link"><span>projecten</span></a>
        <ul class="site-nav-desktop__dropdown-list">
            <li><a href="#">wonem</a></li>
            <li><a href="#">werken</a></li>
            <li><a href="#">skyboxen</a></li>
            <li><a href="#">horeca</a></li>
            <li><a href="#">3d impressies</a></li>
            <li><a href="#">Adeo Design</a></li>
        </ul>
    </li>
    <li class="site-nav-desktop__item"><a href="#contact" class="site-nav-desktop__link"><span>contact</span></a></li>
</ul>

The CSS/SCSS:

    // ==========================================================================
// #Site Nav
// ==========================================================================
ul {
 list-style: none;
}

%triangle-bottom {
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    overflow:hidden;
    bottom: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #f78f1e
}

.site-nav-desktop {
    display: none;



    width: 100%;
    padding-left: 96px;
    line-height: 5em;

    &__item {
        float: left;
        margin-right: 1rem;

        &--dropdown:hover .site-nav-desktop__link span::before {
            @extend %triangle-bottom;
            z-index: 9000;
            right: 50%;
            transform: translateX(50%);
        }

        &--dropdown:hover .site-nav-desktop__dropdown-list {
            display: block;
        }

    }

    &__link {
        padding-right: 1rem;
        display: block;
        position: relative;

        & > span {
            position: relative;
        }

        &   span::after {
            content: "";
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            float: left;
            width: 1px;
            height: 17px;
            margin-left: 1rem;
            background-color: #f78f1d;
        }

        &  > ul > li > a > span:last-of-type::after {
            display: none;
        }   
    }

    &__dropdown-list {
        background-color: #f78f1e;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        line-height: 3em;
        display: none;

        & li {
            display: inline-block;
            position: relative;
            margin-right: .6rem;

            &::after {
                content: "";
                top: 50%;
                transform: translateY(-50%);
                position: absolute;
                float: left;
                width: 1px;
                height: 17px;
                right: 0;
                background-color: white;
            }

            &:last-child::after {
                display: none;
            }
        }

        & a {
            display: block;
            padding-right: 1rem;
        }
    }

}

.site-social {
    float: right;

    &__item {
        display: inline-block;
    }
}

Upvotes: 0

Views: 1136

Answers (3)

patelarpan
patelarpan

Reputation: 8001

Try out this codepen. you can use :not selector. without override any style.

.site-nav-desktop__item:not(:last-child) &  span::after {
        content: "";
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        float: left;
        width: 1px;
        height: 17px;
        margin-left: 1rem;
        background-color: #f78f1d;
    }


ul {
  list-style: none;
}

.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  overflow: hidden;
  bottom: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #f78f1e;
}

.site-nav-desktop {
  display: none;
  width: 100%;
  padding-left: 96px;
  line-height: 5em;
}
.site-nav-desktop__item {
  float: left;
  margin-right: 1rem;
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  z-index: 9000;
  right: 50%;
  transform: translateX(50%);
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__dropdown-list {
  display: block;
}
.site-nav-desktop__link {
  padding-right: 1rem;
  display: block;
  position: relative;
}
.site-nav-desktop__link > span {
  position: relative;
}
.site-nav-desktop__item:not(:last-child) .site-nav-desktop__link span::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  margin-left: 1rem;
  background-color: #f78f1d;
}
.site-nav-desktop__link > ul > li > a > span:last-of-type::after {
  display: none;
}
.site-nav-desktop__dropdown-list {
  background-color: #f78f1e;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  line-height: 3em;
  display: none;
}
.site-nav-desktop__dropdown-list li {
  display: inline-block;
  position: relative;
  margin-right: .6rem;
}
.site-nav-desktop__dropdown-list li::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  right: 0;
  background-color: white;
}
.site-nav-desktop__dropdown-list li:last-child::after {
  display: none;
}
.site-nav-desktop__dropdown-list a {
  display: block;
  padding-right: 1rem;
}

.site-social {
  float: right;
}
.site-social__item {
  display: inline-block;
}
<ul class="site-nav-desktop__list">
        <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>home</span></a></li>
        <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>diensten</span></a></li>
        <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>over ons</span></a></li>
        <li class="site-nav-desktop__item site-nav-desktop__item--dropdown">
            <a href="" class="site-nav-desktop__link"><span>projecten</span></a>
            <ul class="site-nav-desktop__dropdown-list">
                <li><a href="#">wonem</a></li>
                <li><a href="#">werken</a></li>
                <li><a href="#">skyboxen</a></li>
                <li><a href="#">horeca</a></li>
                <li><a href="#">3d impressies</a></li>
                <li><a href="#">Adeo Design</a></li>
            </ul>
        </li>
        <li class="site-nav-desktop__item"><a href="#contact" class="site-nav-desktop__link"><span>contact</span></a></li>
    </ul>

Upvotes: 1

PPL
PPL

Reputation: 6555

Try below scss and check 

 .site-nav-desktop__item:last-child {
  a {
    span::after {
      display: none;
    }
    padding-right: 0;
  }
  margin-right: 0;
}

Upvotes: 0

Zuber
Zuber

Reputation: 3473

add this css

.site-nav-desktop__item:last-child a span:after {
  content: none;
}

working snippet here 

ul {
  list-style: none;
}

.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  overflow: hidden;
  bottom: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #f78f1e;
}

.site-nav-desktop {
  display: none;
  width: 100%;
  padding-left: 96px;
  line-height: 5em;
}
.site-nav-desktop__item {
  float: left;
  margin-right: 1rem;
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  z-index: 9000;
  right: 50%;
  transform: translateX(50%);
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__dropdown-list {
  display: block;
}
.site-nav-desktop__link {
  padding-right: 1rem;
  display: block;
  position: relative;
}
.site-nav-desktop__link > span {
  position: relative;
}
.site-nav-desktop__link span::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  margin-left: 1rem;
  background-color: #f78f1d;
}
.site-nav-desktop__link > ul > li > a > span:last-of-type::after {
  display: none;
}
.site-nav-desktop__dropdown-list {
  background-color: #f78f1e;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  line-height: 3em;
  display: none;
}
.site-nav-desktop__dropdown-list li {
  display: inline-block;
  position: relative;
  margin-right: .6rem;
}
.site-nav-desktop__dropdown-list li::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  right: 0;
  background-color: white;
}
.site-nav-desktop__dropdown-list li:last-child::after {
  display: none;
}
.site-nav-desktop__dropdown-list a {
  display: block;
  padding-right: 1rem;
}

.site-social {
  float: right;
}
.site-social__item {
  display: inline-block;
}

.site-nav-desktop__item:last-child a span:after {
  content: none;
}
<ul class="site-nav-desktop__list">
        <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>home</span></a></li>
        <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>diensten</span></a></li>
        <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>over ons</span></a></li>
        <li class="site-nav-desktop__item site-nav-desktop__item--dropdown">
            <a href="" class="site-nav-desktop__link"><span>projecten</span></a>
            <ul class="site-nav-desktop__dropdown-list">
                <li><a href="#">wonem</a></li>
                <li><a href="#">werken</a></li>
                <li><a href="#">skyboxen</a></li>
                <li><a href="#">horeca</a></li>
                <li><a href="#">3d impressies</a></li>
                <li><a href="#">Adeo Design</a></li>
            </ul>
        </li>
        <li class="site-nav-desktop__item"><a href="#contact" class="site-nav-desktop__link"><span>contact</span></a></li>
    </ul>

Upvotes: 2

Related Questions