Try to change the formatting for specific navigation bars

user_10198911 0
Viewed 82

I am trying to change the back ground color and the text color for specific HTML components.

There are 3 nav bars. I am trying to set a default color for all nav bars but then also change the specific color of 1 nav bar.

For all links i have done the following in the ccs style sheet:

html {
     font: 16px Arial, Helvetica, sans-serif
} 

a {
     color: #1177d1;
}

The 'a' reference all a herf elements and works. But i then want to change the color of the text for one of the specific nav bars to #FFFFFF and change the back ground color as. change the background color to ##1177d1 but the text color does not change as it is still inheriting the above code. how to do stop this?

Below is the code element HTML and CSS for the nav bar in question:

 html {
         font: 16px Arial, Helvetica, sans-serif
    } 
    
    a {
         color: #1177d1;
    }

nav ul {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

nav ul.vertical {
  flex-direction: column;
}

nav ul.horizontal {
  flex-direction: row;
  background-color: #1177d1;
  color: #FFFFFF;
}

nav ul li {
  flex: 1 1 auto;
  list-style-type: none;
}

nav ul li a {
  text-decoration: none;
}
<nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>
</nav>

css html
1 Answers

You need to set the color of the <a> element specifically if you want to target it in the <ul>

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}
nav ul.horizontal > li > a {
    color: #FFFFFF
}
user_23241540
Related