changing specific elements only under a specific class - html

Question

New to CSS . I am experiencing a problem where i only want to change elements within a class only. I have looked online and tried many ways but i really dont know whats the problem.
Here is the html part:
<nav class = "choice">
<ul>
<li>Sign-in</li>
<li> | </li>
<li>Register</li>
<li> | </li>
<li>Request</li>
</ul>
</nav>
<footer class = "footer">
<h2>Site Map</h2>
<ul>
<li>Home</li>
<li>Register</li>
<li><a class = "active" href="about.html">How it All Works</a></li>
<section id = "copy">
<p>© 2018. All Rights Reserved.</p>
</section>
</ul>
</footer>
Here is the css:
.choice{
text-align : right;
}
ul {
list-style-type: none;
margin: 0;
padding: 1em;
width: 200px;
color:white;
}
li a {
display: block;
color: #00ff00;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
#copy{
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 1em;
text-align: center;
bottom:0;
}
So long story short. I just want to change the elements "li" and "ul" under the class choice only but because i have same elements in the footer part, the selectors for the footer part will also change the elements in the class choice. What is the correct way to change g a specific part of a element only for that class ? Thank you

Answer 1

Try adding .choice to select elements under it:
.choice {
text-align : right;
}
.choice ul {
list-style-type: none;
margin: 0;
padding: 1em;
width: 200px;
color:white;
}
.choice li a {
display: block;
color: #00ff00;
padding: 8px 16px;
text-decoration: none;
}
.choice li a.active {
background-color: #4CAF50;
color: white;
}
.choice li a:hover:not(.active) {
background-color: #555;
color: white;
}
#copy{
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 1em;
text-align: center;
bottom:0;
}

Answer 2

Add .choice to all ul and li in CSS which you want to change.
For example: .choice ul, .choice li > a, .choice li > a.active
Below is working code:
.choice {
text-align: right;
}
.choice ul {
list-style-type: none;
margin: 0;
padding: 1em;
width: 200px;
color: white;
}
.choice li > a {
display: block;
color: #00ff00;
padding: 8px 16px;
text-decoration: none;
}
.choice li > a.active {
background-color: #4CAF50;
color: white;
}
.choice li > a:hover:not(.active) {
background-color: #555;
color: white;
}
#copy {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 1em;
text-align: center;
bottom: 0;
}
<nav class="choice">
<ul>
<li>Sign-in</li>
<li> | </li>
<li>Register</li>
<li> | </li>
<li>Request</li>
</ul>
</nav>
<footer class="footer">
<h2>Site Map</h2>
<ul>
<li>Home</li>
<li>Register</li>
<li><a class="active" href="about.html">How it All Works</a></li>
<section id="copy">
<p>© 2018. All Rights Reserved.</p>
</section>
</ul>
</footer>