-2

So I was making a navigation for my website, and I could not figure this out. I think it is the easiest to give you the part of the code

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid"
      <div class="collapse navbar-collapse navbar-right" id="navbar-collapsed-1">
        <ul class="nav navbar-nav">

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu fix-inverse-dropdown fix-dropdown-height"> <!-- Dropdown Items -->
              <li><a href="#">Drop1</a></li>
              <!-- <li role="seperator" class="divider"></li> -->
              <li><a href="#">Drop2</a></li>
              <!-- <li role="seperator" class="divider"></li> -->
              <li><a href="#">Drop3</a></li>
            </ul>
          </li> <!-- ./dropdown -->

        </ul> <!-- ./navbar-collapse -->
      </div> <!-- ./navbar -->
    </div> <!-- ./container-fluid -->
  </nav> <!-- ./nav -->

I'm using bootstrap btw. I wanted to change the color of the whole li on hover, so I tried this

.fix-inverse-dropdown > li:hover {
  color: #fff;
  background-color: #000 !important;
}

In a lot of ways, then I found this.

.fix-inverse-dropdown > li:hover > a {
  background-color: blue;
  color: white;
}

How does this work? Why is the " > a" at the end? And also, if I hover on the text in the a tag, will that be recognised as hovering on the li piece?

So, then I didn't want the seperators to light up on hover, and I wanted the li's to be bigger, so I tried this and removed the seperators

.fix-inverse-dropdown > li {
  vertical-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

But the padding's color didn't change when I was hovering on the li. Found this online also

.navbar-inverse .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #999;
}

I have no idea why and how this works. Can somebody please explain it to me? :P

I literally spent like 2 hours on this, so a big thanks to the person who helps me out

EDIT:

I kind of get it now, so what I still don't understand is this

First question: If I have 3 divs placed in each other, like this: 

<div class="a">
    <div class="b'>
        <div class="c">
        </div>
    </div>
</div>

How can I change the text color in div b and c? Why would 

.b { color: #fff }

not work? Div c is inside div b, right?

Second question: I have a list item, li, with class biggerli. (Thanks Behran Kankul!) In that list item is an a, without a class. Is it possible to change the background color of the a by using the class biggerli? Bootstrap changes the color when hovering on it by default, but I'm changing that, do I have to remove it seperately for the a?

I have done this now

.biggerli:hover,
.biggerli:hover > a {
  background-color: blue !important;
  color: white;
}

Can this be done shorter?

Stefan
  • 1
  • 1
  • The format of your question(s) makes this a bit difficult to answer. The short answer is `li:hover > a` changes the color of `a` because `a` had a color and was not just inheriting `li`'s color, so modifying the `li:hover` color has no effect, but `li:hover > a` does. – Jon Surrell Mar 10 '16 at 14:27
  • If I color the a, wont the text only be colored? I also added a padding to the li, so that wouldn't be colored too, right? – Stefan Mar 10 '16 at 14:35
  • Please, if you have a question about padding, make a question about padding with an example to demonstrate your exact problem. – Jon Surrell Mar 10 '16 at 14:38
  • I'm sorry, it's a question about how those selectors work, and why mine don't work. I didn't know the code made the a change color and not the li.. – Stefan Mar 10 '16 at 14:42
  • I edited my question to what I don't understand yet – Stefan Mar 10 '16 at 15:02

1 Answers1

0

there is node hiearchy on html. > operator means immediate children.

<div class='a'>
    <div>
        <div>...</div>
    </div>
</div>

and you have a selector

.a > div { ... }

then it will affect the second level div, and not the third.

check it out CSS '>' selector; what is it?

Community
  • 1
  • 1
Behran Kankul
  • 68
  • 4
  • But if I have this: 'code'
    ...
    'code' This should work: .div1 { font-size: 100px; } Right?
     – Stefan Mar 10 '16 at 14:29
  • Sorry it looks messed up If the third level div had the class "div1", I could use .div1 to style that, right? Because that didn't work too (I tried to color the li itself) – Stefan Mar 10 '16 at 14:33
  • why dont you add another class to it? you can use !important for it. .biggerLi { padding:5px!important} – Behran Kankul Mar 10 '16 at 14:36
  • If I do that, the padding part does not change when I hover on the li. – Stefan Mar 10 '16 at 14:44