Title: Changing navbar text color
Tags: html;css;twitter-bootstrap;colors
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=&quot;navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light&quot;&gt;
    <div class=&quot;container-fluid&quot;&gt;
        <ul class=&quot;navbar-nav mb-2 mb-lg-0&quot;&gt;
          <li class=&quot;nav-item&quot;&gt;
            <a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home</a&gt;
          </li&gt;
          <li class=&quot;nav-item&quot;&gt;
            <a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt;About</a&gt;
          </li&gt;
          <li class=&quot;nav-item&quot;&gt;
            <a class=&quot;nav-link&quot; href=&quot;/login&quot;&gt;Login</a&gt;
          </li&gt;
       </ul&gt;
    </div&gt;
  </nav&gt;
```
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?



Here is another answer: 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'&gt;Login</a&gt;``` tag.
```<nav class=&quot;navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light&quot;&gt;
    <div class=&quot;container-fluid&quot;&gt;
        <ul class=&quot;navbar-nav mb-2 mb-lg-0&quot;&gt;
          <li class=&quot;nav-item&quot;&gt;
            <a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home</a&gt;
          </li&gt;
          <li class=&quot;nav-item&quot;&gt;
            <a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt;About</a&gt;
          </li&gt;
          <li class=&quot;nav-item&quot;&gt;
            <a class=&quot;nav-link text-danger&quot; href=&quot;/login&quot;&gt;Login</a&gt;
          </li&gt;
       </ul&gt;
    </div&gt;
  </nav&gt;
```
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
}

```

Comment for this answer: That works, but what if I want to change another style element separately? Attribute selector suggested by Sebastian doesn't work or I'm doing something wrong.
Comment for this answer: @JustasG There are many ways and it depends on situation. You can also use `li:nth-of-type(3) a{ color: red; }` in above example.
Comment for this answer: @JustasG updated the answer. I hope it will clear your solution

Here is another answer: 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"&gt;
    <div class="container-fluid"&gt;
        <ul class="navbar-nav mb-2 mb-lg-0"&gt;
          <li class="nav-item"&gt;
            <a class="nav-link active" aria-current="page" href="#"&gt;Home</a&gt;
          </li&gt;
          <li class="nav-item"&gt;
            <a class="nav-link" href="/about"&gt;About</a&gt;
          </li&gt;
          <li class="nav-item"&gt;
            <a class="nav-link" href="/login"&gt;Login</a&gt;
          </li&gt;
       </ul&gt;
    </div&gt;
  </nav&gt;```





{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:04/29/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><twitter-bootstrap><colors>', 'Title': 'Changing navbar text color', 'ViewCount': 41, 'id': 67324393, 'user_AboutMe': None, 'user_AccountId': 20437370.0, 'user_DisplayName': 'JustasG', 'user_Reputation': 15.0, 'user_Views': 3.0, 'user_id': 14994885.0}}