How to define correct CSS selector? - html

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;
}

Answer 1

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.