Assessment wanted for the cascade skill test
Looking for feedback on the CSS assessment Assessment wanted for the cascade skill test.
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):
HTML
<!-- 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
/* 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;
}
}