Why does selecting multiple elements CSS work differently?

Question

I was trying to create a responsive menu but selecting a specific element worked out differently. For example, when I selected "nav ul li" for list styles in the default size and selected "ul li" for list style in the breakpoint, it didn't work as I intended.

It was fixed when I selected "ul li" for both the default size and the breakpoint but I don't know why it fixed the issue because as far as I know, selecting "nav ul li" and "ul li" are the same thing. Could somebody help me with this?

nav {
  width: 100%;
  background-color: darkblue;
}

ul {
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 20px;
}

ul li:hover {
  background-color: orange;
}

ul li a {
  color: #ffffff;
  text-decoration: none;
}

.toggle {
  width: 100%;
  padding: 10px 20px;
  background-color: #001f44;
  text-align: right;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 30px;
  /* to hide toggle */
  display: none;
}


/*  Break Point for the toggle */

@media screen and (max-width:768px) {
  .toggle {
    display: block;
  }
  ul {
    width: 100%;
  }
  ul li {
    display: block;
    text-align: center;
  }
}

<div class="toggle">
  <i class="fa fa-bars"></i>
</div>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Resume</a></li>
  </ul>
</nav>

score 1 · Answer 1 · answered Aug 19 '19 at 16:27

You are running into specificity issues. In CSS, if two different rules target the same element with same attributes, the rule with the more specific selector will win and cancel out the less specific rule.

Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

nav ul li {/* more specific rule wins */
  color: blue; 
}

ul li {
  color: red;
}

<nav>
  <ul>
    <li>The first list example</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>The second list example</li>
  </ul>
</nav>

That makes sense! Now, I got why it didn't work at first : ) Thank you. — Dan, Aug 19 '19 at 18:53

Rounin · Answer 2 · 2019-08-19T16:45:25.313

CSS is easy to start writing and really hard to maintain.

One approach to simplify maintainability and avoid specificity conflicts is BEM (Block, Element, Modifier) in which every element has a class and that class describes the element as either:

a Block
a Block Element
a Modified Block
a Modified Block Element

Eg.

<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__list-item">The first list example</li>
  </ul>
</nav>

<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__list-item">The second list example</li>
  </ul>
</nav>

This will help you entirely avoid any specificity conflicts.

N.B.

BEM is just one approach to writing CSS. Others which similarly seek to simplify maintainability and extendability are OOCSS and SMACSS.

You will find on the web nearly a decade's worth of blog posts and tutorials on any of these approaches to writing CSS.

That is a great idea. I will try to use your method from now on. Thank you for your help! — Dan, Aug 19 '19 at 18:53

score 0 · Answer 3 · answered Aug 19 '19 at 16:39

What is happing is that you are not overriding your selection in the media query.

For instance lets say you got:

CSS:

p a{
color: red
}

@media screen and (max-width:768px) {
  a {
    color: blue;
  }
}

html:

<p> <a>Some Url </a> </p>

The media query wont override the selection for is not as specific as the prior selection.

CSS is about priorities for the more specific the higher the priority of style.

So as:

p a { some style} is more specific than a {some style} then the priority stands for the first one.

In your example, ul li is less specific than nav ul li, thats why you are not overriding the style with the media query.

Hope this answer your question.

Go to w3schools.com for CSS selection rules.

That explains why it acted differently at first. Thank you for your help! — Dan, Aug 19 '19 at 18:54

Why does selecting multiple elements CSS work differently?

3 Answers3