Why isn't my CSS rule being applied without an ID or ancestor class?

Question

I am making a simple navigation menu and I want my last list item (search box) to the extreme right of navigation bar.

.nav-list li {
  float: left;
  margin: 10px 15px;
}

.nav-list .search-box {
  float: right;
}

<nav>
  <ul class="nav-list">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Features</li>
    <li class="search-box">
      Search: <input type="text" name="search" id="search">
    </li>
  </ul>
</nav>

This is working fine. But when I am trying to target last list item with just the search-box class like

.search-box {
     float: right 
}

it is not floating to the right. Can anyone please explain why it is not working ?

Edit: It is also working fine if I target the last item via Id. Like

#search-box {
  float: right
 }

as a side note, dont use float for styling pupose. Its long outdated and a mis-used hack. Use simply `display: flex;` — tacoshy, Mar 31 '21 at 15:38
Please take the [tour] when you have a minute. "Thanks" comments are discouraged. Just use votes. — isherwood, Mar 31 '21 at 16:36

Salman A · Accepted Answer · 2021-03-31T16:19:17.813

This is because of specificity coming into play. Consider the following rules, the list item <li class="search-box" id="search-box"> matches all of them:

.nav-list li          { float: left;  } /* 2 */
.nav-list .search-box { float: right; } /* 3 */
.search-box           { float: right; } /* 1 */
#search-box           { float: right; } /* 4 */
li.search-box         { float: right; } /* 2 */

When there are multiple matches for same property (float in this case), the rule with highest specificity wins¹. I have numbered the rules based on soecifity; higher means having more weight.

¹ In case of a tie, the rule appearing last in source order wins.

score 0 · Answer 2 · answered Mar 31 '21 at 15:46

If you look at the computed styles tree in dev tools you see that .nav-list li is overriding .search-box as a selector. It simply comes down to selector specificity.

This is a common occurrence with CSS and your selector is appropriate. Avoid using !important whenever possible, as it makes future work more difficult.

score -1 · Answer 3 · answered Mar 31 '21 at 15:50

I want to show you different solution for the reason of correct styling and using modern techniques.

float is not intended for styling purpose. Its only for floating images within a text paragraph. It was a mis-used hack and unfortuantly still is tought.

The modern solution is the use of flexbox like in the sample below. Give the last item simply a margin-left: auto; and the amrgin will occupy the remaining space and as such move the last element to the very right side.

nav ul {
  display: flex;
}

nav ul li {
  margin: 10px 15px;
} 

nav ul li:last-of-type {
  margin-left: auto;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Features</li>
    <li>
      Search: <input type="text" name="search" id="search">
    </li>
  </ul>
</nav>

Thanks a lot @tacoshy for your beautiful explaination and code solution of the problem. I am actually aware of the fact that float hack is outdated but I was just curious to know the solution of the above problem. Thanks — Deepak Yadav, Mar 31 '21 at 16:14

Why isn't my CSS rule being applied without an ID or ancestor class?

3 Answers3