Changing navbar text color

Question

I'm working with Bootstrap navbar and I want to change colour of one of the links. I can easily change colour of all links with the code below, but i need to change just one.

.navbar-custom .navbar-nav .nav-link {
color: red;
}

and HTML

<nav class="navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light">
    <div class="container-fluid">
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a>
          </li>
       </ul>
    </div>
  </nav>

Let's say I want to change colour of the Login link to red. How to do this without changing About link colour at the same time and what's the rules of changing style of one element instead of all in nested elements like lists in navbar?

Answer 1

One option would be to use an Attribute Selector:

 a[href="/login"] { color: red; }

 <nav class="navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light"> <div class="container-fluid"> <ul class="navbar-nav mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="/login">Login</a> </li> </ul> </div> </nav>

Answer 2

Simply add text-danger class to your required tag to change color.

Bootstrap provides some different theme colors through classes. Go through the document here

You required for login . Hence added text-danger to that respected <a href='/login'>Login</a> tag.

<nav class="navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light">
    <div class="container-fluid">
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-danger" href="/login">Login</a>
          </li>
       </ul>
    </div>
  </nav>

Using :n-th-of-type()

If you have similar tags as present here and want to change only selected ones then you can use this method. You can see n-th-of-type() , nth-child() , nth-last-of-type()

li:nth-of-type(3) a{  // It will select third li a element
  color: red
}

li:nth-of-type(2n) a{  // It will select even li a element like 2nd, 4th, ..
  color: red
}

li:nth-of-type(2n+1) a{  // It will select odd li a element like 1st, 3rd, ..
  color: red
}