CODEWITHSUNDEEP
htmlcsscss-selectors
ever alian
ever alian

Reputation: 1060

How to change the CSS apply order

See below screen grab, I want to make the .navbar-account > li > a as the active one. But by default it's disabled and active one is .navbar-default .navbar-nav>li>a. Due to this my font color doesn't change as red. I cannot put !important as it affects another page. So somehow I want to enable the .navbar-account > li > a in the slid-in-menu.css.

enter image description here

Upvotes: 2

Views: 895

Answers (5)

Ishita
Ishita

Reputation: 36

Use the following style:

.navbar-account>li>a:first-child{
     color:#E84c4c;
}

Upvotes: 0

Harry
Harry

Reputation: 89760

In this case, the selector that is present within the bootstrap.min.css file has more specificity than the one that is present in slide-in-menu.css and hence that one wins.

Specificity is a very important thing because we can always have the same element being targeted by multiple selectors (like in this case) and during such times, the User Agents use the specificity of the selectors to determine which one would eventually win and get applied to the element.

As per W3C Specs:

A selector's specificity is calculated as follows:

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

For the selector .navbar-default .navbar-nav>li>a, the specificity is 022 because it has two class selectors and two element type (li, a) selectors as part of it.

Whereas the selector .navbar-account > li > a has a specificity of only 021 because it only has 1 class selector and two element type selectors as part of it.

So, the key to overriding the properties specified within the bootstrap selector is to use a selector that is more specific than the bootstrap one. If we change the selector to body .navbar-default .navbar-account > li a, the selector's specificity becomes 023 (higher than bootstrap selector) because now it has 2 class selectors and 3 element type selectors and so it wins.

Changing the selector this way would not cause any other problems elsewhere also because body is always the parent for all elements and .navbar-default is the parent for .navbar-account.

Note: We could just use .navbar-default .navbar-account > li a (without the body) also but its specificity is 022, which is the same as the bootstrap selector and hence there is no guarantee that it will always get applied. (This was written before I saw this comment of yours. If the slide-in-menu.css is always loaded after bootstrap.min.css then this alone would also suffice.)

Also, as I had mentioned in my comment to Scott Marcus' answer, if you want the bootstrap styles to be overridden only for one page then his answer has the best approach. The approach mentioned in my answer will override in all pages.

Upvotes: 3

Shashank
Shashank

Reputation: 2060

If you have the freedom to change the CSS in 'slid-in-menu.css', then the following code illustrates the modification in the same CSS file (considering your existing HTML DOM and the classes applied):

.navbar-default .navbar-nav.navbar-account {
     /* apply whichever CSS style you want to apply */
 }

Explanation:

The CSS follows a hierarchy in which the former CSS applied was getting applied because '.navbar-default' is the parent and then it goes to the child, as '.navbar-nav' is the child of it. Since it contains two classes so it is having higher priority whereas in the latter the css applied, was with '.navbar-account', which has a lower priority than that of the other.

Upvotes: 1

user5337341
user5337341

Reputation: 

  .navbar-account > li > a:active{
    #give your style
    }

Check this button

U can use this button to show your style on active ,hover ,focus.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65795

Just re-define that style in the particular page:

 <style>
        .navbar-default .navbar-nav>li>a { . . .}
 </style>

The local page style will override the linked one, but only affect the one page.

By the way, here is an excellent resource for determining which selector is more specific than another: https://specificity.keegan.st/

Upvotes: 1

Related Questions