How to modify a class when a specific class exists on the same element?

Question

So I have my (simplified here) bootstrap navbar here.

<nav class="navbar">
    <ul class="navbar-nav">
        <li><a href="#">foo</a></li>
    </ul>
</nav>

.navbar-fixed-top {
  height: 100px;
}
.navbar-nav >li >a {
  line-height: 100px
}

I just want to shrink the navbar when I add the class .shrink to nav . Pretty easy, just adding the following to my css:

.shrink {
    height: 80px;
}

The problem is: the line-height of .navbar >li >a stays 100px - is there a way I can affect this with css only?

Answer 1

Something like this perhaps?

.navbar {
  height: 100px;
}

.navbar.shrink {
  height: 80px
}

.navbar > .navbar-nav > li > a {
  line-height: 100px
}

.navbar.shrink > .navbar-nav > li > a {
  line-height: 80px
}

Answer 2

you could try:

.shrink a {
    line-height: <whatever>;
}

That will apply the styles you want to an a element contained in an element with the shrink class.