Help wanted with Cascade skill test 1

MDN Learn
,
#1

Hello, I’m learning CSS and have a suspicion I didn’t solve a skill test in the intended way.

In trying to match the white background, my working CSS looks like this:

/* Specificity: 0113 */
/* Goal: override the blue background-color with initial */
#outer div ul .nav a {
  background-color: blue;
  padding: 5px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Specificity: 0004 */
div div li a {
  color: yellow;
}               

/* Specificity: 0113 */ /* Successful, but jank? */
#outer div ul .nav a {
   background-color: initial;
}

============

<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>

That third rule works because I’ve verbatim copied the first rule’s selector, and overridden it with my own further down in the CSS. This works, but I also tried to complete the exercise with more specific selectors, and those didn’t work.

Can someone explain why the following rules don’t target my text properly?

/* Intended specificity: 0213,
notice the extra #inner ID selector */
#outer #inner div ul .nav a {
    background-color: initial;
}

/* Intended specificity: 0114,
notice the extra li element selector */
#outer div ul li .nav a {
    background-color: initial;
}

You can plug these rules into the CSS section of the exercise to see that they don’t work. Why don’t these rules work?

#2

Hello @mr.ryanvillena

this would not work

why? cause it look for div element inside element whos id is #inner but it did not find any sub element called inside the inner one

so fix it by 2 ways

#outer div ul .nav a        \\ as you already did

or

#outer #inner ul .nav a

now for the second one

this would not work cause it look for a class called nav inside the li element which does not exist

you can fix this by 2 ways

#outer div ul li.nav a

or

#outer div ul .nav a

hope that help and have a nice day :slight_smile: