How to define correct CSS selector?

Question

I have a question concerning CSS selectors. How to choose a correct one? For example I have this piece of HTML:

<header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p style="font-size:1.2em" class="navbar-text">Project name</p>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="navbar-nav nav navbar-right">
                    <li><a style="font-size:1.2em" href="#AboutMe">Text1</a></li>
                    <li><a style="font-size:1.2em" href="#Social">Text2</a></li>
                    <li><a style="font-size:1.2em" href="#Projects">Text3</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
 </header>

To make my list elements li in unordered list ul to change appearance I saw next CSS selector:

.navbar-inverse .navbar-nav > li > a:hover {
  background-color: white;
  color: black;
}

And how I understand this selector says: chose all a elements children of li element who in his turn a child of an element with .navbar-nav class (?) and all of this inside and element with .navbar-inverse class (?).

And this work well. But. If change this selector to another one:

li > a:hover {
  background-color: white;
  color: black;
}

This does not work. But what it's say: chose all a elements that's a direct children of li element.

Or maybe I do not understand very well concept of CSS selectors.

Thanks.

Edit:
That's all my internal CSS who could potentially influence nav element. Thanks.

/*
Solution from "http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site"
*/
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
} 

.anchor {
  padding-top:40px;
 }

.navbar-inverse .navbar-nav > li > a:hover {
  background-color: white;
  color: black;
}
.navbar {
  background-color: #444;
  border: 0px;
  letter-spacing: 2px;
  padding-right: 50px;
  padding-left: 50px;
}

tried on jsfiddle, and it works. https://jsfiddle.net/3jyceeub/. it's weird. can you debug the css with browser debugger, and apply hover on that element. http://imgur.com/a/CKfYr — Yudi Chang, May 17 '17 at 03:09
You should see if `a:hover` is defined somewhere else. There is a good chance there is a specificity issue where something is overriding it. — Derek Story, May 17 '17 at 03:15
`@DerekStory` I think for sure `a:hover` is defined in bootstrap somewhere else. Maybe that's the reason why `@YudiChang` solution work (he did not import bootstrap) — RickSanch3z, May 17 '17 at 13:23

score 0 · Accepted Answer · answered May 17 '17 at 03:27

Well, your problem is definitely one of specificity since the selector with more specificity is providing the correct results. You can look at MDN to explain more or look here at CSS tricks to go into more detail. But essentially, selectors each have a number associated with them of priority, elements have the lowest number, inline styles and !important have the highest. The more selectors in your CSS, the higher the number. Higher numbers will override lower numbers when rendering int he browser.

It is hard to tell without seeing more of your CSS, but if you have styles for your a tag or l tag that have classes on them this would cause your issue. For example:

.navbar-nav .nav-right a {
    background: blue;
}

Would prevent your hover from taking effect with just "li > a:hover" because the browser takes the background color of the higher specificity. So perhaps look at other styles above this in your sheet. When in doubt, try things out in codepen.

Yep here it is: `.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}` that's one of `li>a` selectors of this genre. When I delete **bootstrap 3.3.7** import all work well. I think we can consider `@JasonS` as an answer. Thanks to all. — RickSanch3z, May 17 '17 at 13:35

How to define correct CSS selector?

1 Answers1