Change background of second last item in a nav

Question

I have created a drop down navigation bar using only html and css, it has submenus also. How can I change the second last item on the below Navigation bar item to different color. In the below example I need to change the color of Contact link background to a different color. I have tried :nth child but it didn't worked.

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    background: rgb(247, 18, 197);
    height: 50px;
    text-decoration: none;
}

.nav a:hover{
    background: red;
}
.nav ul{
    list-style: none;
    display: flex;
}
.nav li{
    position: relative;
    width: 100%;
    text-align: center;
}
.nav li:hover .dropdown1 > li{
    display: block;
    top:0;
    
}
.dropdown1 li{
    display: none;
    position: relative;
}
.dropdown1, .dropdown3{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 100%;

}
.dropdown1 li:hover .dropdown2 li{
    display: block;
}
.dropdown2 li{
    display: none;
}
.dropdown2{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;

}

.dropdown3 li{
    display: none;
    position: relative;
}

.nav li:hover .dropdown3 > li{
    display: block;
    top:0;
    
}

<div class="nav">               
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a>
                <ul class="dropdown1">
                    <li><a href="#">Logo Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a>
                        <ul class="dropdown2">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a>
                <ul class="dropdown3">
                    <li><a href="#">WhatsApp</a></li>
                    <li><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>

        </ul>
    </div>

Answer 1

Selecting via nth child as you have tried is a good way to go.

But you have to be very specific about not just selecting the 5th child, which is the Contact item, but also making sure that that doesn't affect any other list that might have 5 li elements. We also have to restore the original background color to the drop down of the Contacts item.

The good news is that you don't have to alter your HTML in any way. However, if Contacts stopped being the 5th element in the nav list you would have to change the CSS. It could be that using nth-last-child(2) would be more reliable if you are pretty sure Contact is likely to remain the second to last item even if more are added to nav beforehand.

Using nth-child this CSS is added:

  .nav ul li:nth-child(5) a {
  background-color: blue;
}

  .nav ul li:nth-child(5) ul li a, .nav ul li ul li a {
    background: rgb(247, 18, 197);
}

Here is your snippet with these additions:

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    background: rgb(247, 18, 197);
    height: 50px;
    text-decoration: none;
}

.nav a:hover{
    background: red;
}
.nav ul{
    list-style: none;
    display: flex;
}
.nav li{
    position: relative;
    width: 100%;
    text-align: center;
}
.nav li:hover .dropdown1 > li{
    display: block;
    top:0;
    
}
.dropdown1 li{
    display: none;
    position: relative;
}
.dropdown1, .dropdown3{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 100%;

}
.dropdown1 li:hover .dropdown2 li{
    display: block;
}
.dropdown2 li{
    display: none;
}
.dropdown2{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;

}

.dropdown3 li{
    display: none;
    position: relative;
}

.nav li:hover .dropdown3 > li{
    display: block;
    top:0;
    
}

  .nav ul li:nth-child(5) a {
  background-color: blue;
}

  .nav ul li:nth-child(5) ul li a, .nav ul li ul li a {
    background: rgb(247, 18, 197);
}

<div class="nav">               
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a>
                <ul class="dropdown1">
                    <li><a href="#">Logo Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a>
                        <ul class="dropdown2">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a>
                <ul class="dropdown3">
                    <li><a href="#">WhatsApp</a></li>
                    <li><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>

        </ul>
    </div>

Answer 2

Method 1

I have named Contacts with a class name .active which I've used as a selector. Use !important at the end of your CSS commands to increase specificity. This will help override the default background-color property of your nav.

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    background: rgb(247, 18, 197);
    height: 50px;
    text-decoration: none;
}

.nav a:hover{
    background: red;
}
.nav ul{
    list-style: none;
    display: flex;
}
.nav li{
    position: relative;
    width: 100%;
    text-align: center;
}
.nav li:hover .dropdown1 > li{
    display: block;
    top:0;
    
}
.dropdown1 li{
    display: none;
    position: relative;
}
.dropdown1, .dropdown3{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 100%;

}
.dropdown1 li:hover .dropdown2 li{
    display: block;
}
.dropdown2 li{
    display: none;
}
.dropdown2{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;

}

.dropdown3 li{
    display: none;
    position: relative;
}

.nav li:hover .dropdown3 > li{
    display: block;
    top:0;
    
}
.active{
  background-color: blue !important;
 }

<div class="nav">               
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a>
                <ul class="dropdown1">
                    <li><a href="#">Logo Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a>
                        <ul class="dropdown2">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li><a href="#" class="active">Contact</a>
                <ul class="dropdown3">
                    <li><a href="#">WhatsApp</a></li>
                    <li><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>

        </ul>
    </div>

Method 2

Apply !important just like method one, but this time instead of making a new class use :nth-child. The value -2 will select the second last child.

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    background: rgb(247, 18, 197);
    height: 50px;
    text-decoration: none;
}

.nav a:hover{
    background: red;
}
.nav ul{
    list-style: none;
    display: flex;
}
.nav li{
    position: relative;
    width: 100%;
    text-align: center;
}
.nav li:hover .dropdown1 > li{
    display: block;
    top:0;
    
}
.dropdown1 li{
    display: none;
    position: relative;
}
.dropdown1, .dropdown3{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 100%;

}
.dropdown1 li:hover .dropdown2 li{
    display: block;
}
.dropdown2 li{
    display: none;
}
.dropdown2{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;

}

.dropdown3 li{
    display: none;
    position: relative;
}

.nav li:hover .dropdown3 > li{
    display: block;
    top:0;
    
}

li[tab="Contact"] > a{
  background-color: blue;
}
nav:nth-child(-2){
  background-color: blue !important;
 }

<div class="nav">               
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a>
                <ul class="dropdown1">
                    <li><a href="#">Logo Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a>
                        <ul class="dropdown2">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li tab="Contact"><a href="#">Contact</a>
                <ul class="dropdown3">
                    <li><a href="#">WhatsApp</a></li>
                    <li><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>

        </ul>
    </div>

You can also use nth-last-child(2) instead of nth-child(-2).

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    background: rgb(247, 18, 197);
    height: 50px;
    text-decoration: none;
}

.nav a:hover{
    background: red;
}
.nav ul{
    list-style: none;
    display: flex;
}
.nav li{
    position: relative;
    width: 100%;
    text-align: center;
}
.nav li:hover .dropdown1 > li{
    display: block;
    top:0;
    
}
.dropdown1 li{
    display: none;
    position: relative;
}
.dropdown1, .dropdown3{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 100%;

}
.dropdown1 li:hover .dropdown2 li{
    display: block;
}
.dropdown2 li{
    display: none;
}
.dropdown2{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;

}

.dropdown3 li{
    display: none;
    position: relative;
}

.nav li:hover .dropdown3 > li{
    display: block;
    top:0;
    
}

li[tab="Contact"] > a{
  background-color: blue;
}
nav:nth-last-child(2){
  background-color: blue !important;
 }

<div class="nav">               
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a>
                <ul class="dropdown1">
                    <li><a href="#">Logo Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a>
                        <ul class="dropdown2">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li tab="Contact"><a href="#">Contact</a>
                <ul class="dropdown3">
                    <li><a href="#">WhatsApp</a></li>
                    <li><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>

        </ul>
    </div>

Note that using nth-child to override property doesn't change hover effects, whereas using class selectors does so. So choose a method accordingly. You can also still stick to the first method and add .active:hover after to retain/add hover effects.

Answer 3

You can add a custom attribute to the required li, and select it using the pattern E[attribute="value"] which selects the element with matching value of that attribute.

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    background: rgb(247, 18, 197);
    height: 50px;
    text-decoration: none;
}

.nav a:hover{
    background: red;
}
.nav ul{
    list-style: none;
    display: flex;
}
.nav li{
    position: relative;
    width: 100%;
    text-align: center;
}
.nav li:hover .dropdown1 > li{
    display: block;
    top:0;
    
}
.dropdown1 li{
    display: none;
    position: relative;
}
.dropdown1, .dropdown3{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 100%;

}
.dropdown1 li:hover .dropdown2 li{
    display: block;
}
.dropdown2 li{
    display: none;
}
.dropdown2{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;

}

.dropdown3 li{
    display: none;
    position: relative;
}

.nav li:hover .dropdown3 > li{
    display: block;
    top:0;
    
}

li[tab="Contact"] > a{
  background-color: blue;
}

<div class="nav">               
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a>
                <ul class="dropdown1">
                    <li><a href="#">Logo Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a>
                        <ul class="dropdown2">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li tab="Contact"><a href="#">Contact</a>
                <ul class="dropdown3">
                    <li><a href="#">WhatsApp</a></li>
                    <li><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>

        </ul>
    </div>