CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user8936150
user8936150

Reputation:

Inheritance in bootstrap (How to know the particular class that we need to customize)

I was learning bootstrap and got confused in class about how to implement it, here is my problem: 

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar right">
                <list class="active"><a href="#">Home</a></list>
            </ul>
        </div>
    </div>
</nav>

Now in styling i have been using 

.navbar-inverse .navbar-nav .active a:hover{
  background-color:#2f2f2f;
}

My question is how can we know that the active class is inside navbar-inverse navbar-nav ? Why not nav class ?

Upvotes: 0

Views: 534

Answers (1)

Jade Cowan
Jade Cowan

Reputation: 2583

It's not that the active class is inside navbar-inverse navbar-nav and not nav. You need to understand a CSS concept call specificity. Specificity provides us a means to assign a calculated value to a CSS selector. The basics of the calculation are as follows:

If the element has inline styling, that automatically wins (1,0,0,0 points) For each ID value, apply 0,1,0,0 points For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points For each element reference, apply 0,0,0,1 point

Ultimately, the highest selector value wins and that's the style applied. To apply the desired style in your case, you need to make sure your selector has a higher calculated value than Bootstrap's selector. Your selector works, although the selector doesn't have to be like following:

.navbar-inverse .navbar-nav .active a:hover{
  background-color:#2f2f2f;
}

It could be, in certain circumstances, be written like this:

#moreSpecific a:hover{
  background-color:#2f2f2f;
}

You can see it in action in this codeply project.

I would also suggest reading this article on specificity from CSS-Tricks. It's much more thorough and goes into more depth on the concept.

Upvotes: 2

Related Questions