# Assessment wanted for the cascade skill test | dissidenttux

**URL:** <https://discourse.mozilla.org/t/assessment-wanted-for-the-cascade-skill-test-dissidenttux/110734>\
**Category:** Learn\
**Tags:** participation, learning, feedback\
**Created:** [February 5, 2023, 5:52am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-the-cascade-skill-test-dissidenttux/110734 "2023-02-05T05:52:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dissidenttux](https://avatars.discourse-cdn.com/v4/letter/d/db5fbb/32.png) [@dissidenttux](https://discourse.mozilla.org/u/dissidenttux)\
**Post date:** [February 5, 2023, 5:52am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-the-cascade-skill-test-dissidenttux/110734/1 "2023-02-05T05:52:30Z")

</div>

# Assessment wanted for the cascade skill test

Looking for feedback on the CSS assessment [Assessment wanted for the cascade skill test](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks).

Just wanted to check if there is anything out of place or not, or simply document my success. I feel as if I completed the tasks well enough. Here is my source code, validate at will.

Thanks in advance,  
@dissidenttux

My code (also on [CodePen](https://codepen.io/dissidenttux/pen/oNMVbGe)):

## HTML

```auto
<!-- NOTE: The IDs and classes of "outer", "inner", & "container", were edited with a number appended to it corresponding to the task assigned for clarity.
E.g. "outer" in task 1 would be "outer1", & so forth -->

<!-- NOTE 2: Even with these changes, it seems the element selectors still affect both examples. I am choosing not to edit further as I am not sure how to go about doing that in a way that isn't confusing -->

<!-- Task 1 -->
<div id="outer1" class="container1">
  <div id="inner1" class="container1">
    <ul>
      <li class="nav1"><a href="#">One</a></li>
      <li class="nav1"><a href="#">Two</a></li>
    </ul>
  </div>
</div>
    
<!-- Task 2 -->

<div id="outer2" class="container2">
  <div id="inner2" class="container2">
    <ul>
      <li class="nav2"><a href="#">One</a></li>
      <li class="nav2"><a href="#">Two</a></li>
    </ul>
  </div>
</div>

```

## CSS

```auto
/* NOTE: The IDs and classes of "outer", "inner", & "container", were edited with a number appended to it corresponding to the task assigned for clarity.
E.g. "outer" in task 1 would be "outer1", & so forth */

/* NOTE 2: Even with these changes, it seems the element selectors still affect both examples. I am choosing not to edit further as I am not sure how to go about doing that in a way that isn't confusing */

/* Task 1 */
    #outer1 div ul .nav a {
      background-color: powderblue;
      padding: 5px;
      display: inline-block;
      margin-bottom: 10px;
    }

    div div li a {
      color: rebeccapurple;
    }

    div#inner1.container1 ul li.nav a {
      background-color: unset;
    }

/* Task 2 */
      @layer yellow, green, purple;

      @layer yellow {
        #outer2 div ul .nav a {
          padding: 5px;
          display: inline-block;
          margin-bottom: 10px;
        }
      }
      @layer purple {
        div div li a {
          color: rebeccapurple;
        }
      }
      @layer green {
        a {
          color: lightgreen;
        }
      }

```

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [February 15, 2023, 2:14pm UTC](https://discourse.mozilla.org/t/assessment-wanted-for-the-cascade-skill-test-dissidenttux/110734/2 "2023-02-15T14:14:21Z")

</div>

Congratulations @dissidenttux

Both tasks are correctly solved.

Additional question if you like:  
In task 1 which other keywords besides “unset” would work?

See you,  
Michael