Assessment wanted for Cascade skill test 1-haydee

MDN Learn
#1

task goal: use one of the special values in the Controlling inheritance section to write a declaration in a new rule that will reset the background color back to white

my work:
HTML part


The Cascade Task

  <body>

    <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>
  </body>

CSS part：

      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }
      #outer div ul .nav a {
        background-color: blue;
        padding: 5px;
        display: inline-block;
        margin-bottom: 10px;
      }

      #outer #inner {
      background-color: initial !important;
      }

      div div li a {
        color: yellow;
      }
    </style>

all I have done is to add one rule

 #outer #inner {
          background-color: initial !important;
          }

my thinking:

  1. I use the initial because the natural value of background-color is white
  2. I have 2 ID selector and I !important, in every perspective, my specificity score will make my rule override all the others

However, it just doesn’t work out. So I want to know why

#2

Hello @Austin_Hart

the blue color apply to #outer div ul .nav a so it apply to the a element but your selector apply to #outer #inner so it apply to the inner div

try this

#outer #inner {
      background-color: red ;
      }

and you would see which it apply to

so try this selector #outer #inner a and it work even without the important

hope that help and have a nice day :slight_smile:

1 Like
#3

I did more excercise on Selectors today.
Now I understand that
#outer div ul .nav ais more specific because it targets on a directly
but my #outer #inneractually targets on the inner div. The former one is more specific than the latter one.
Thank you for your help~

#4

you very welcome but the issue was not about the specifity it was about what your selector target

#outer #inner this target the div as whole and #outer div ul .nav a target a only so if you trid my code above you would see a still blue while the div background be red

so think of it as box with red background and inside that box there another box is blue

specificity is when you target same element but one way is more specific than the other like using id and so on

sorry english is not my main language so maybe i did not explain that as it should be in the first time

and have a nice day :slight_smile:

1 Like
#5

Now I have already learnt the box model so I think your explanation appears quite clear to me now.
Thank you for your patience and time~

2 Likes
#6

you very welcome and glad to help any time :slight_smile: