CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 9

How to colour navigation bar without styling all lists?

I've recently started learning HTML, JavaScript and CSS and was creating my own webpage. I created a navigation bar on the top of the page and styled it using CSS. I then created another list later on but when looking on the page, the CSS had styled all of the lists on the page, rather than just the navigation bar. Is there a way to style one but not all? My code is below.

#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #008080;
}
<h1>The Great Pyramid of Giza</h1>
<ul>
  <li><a href="Seven Wonders.html">Homepage</a></li>
  <li><a class="active" href="Great Pyramid of Giza.html">The Great Pyramid of Giza (Honoray)</a></li>
  <li><a href="Great Wall of China.html">The Great Wall of China</a></li>
  <li><a href="Petra.html">Petra</a></li>
  <li><a href="The Colosseum.html">The Colosseum</a></li>
  <li><a href="Chichen Itza.html">Chichen Itza</a></li>
  <li><a href="Machu Pichu.html">Machu Picchu</a></li>
  <li><a href="Taj Mahal.html">Taj Mahal</a></li>
  <li><a href="Christ the Redeemer.html">Christ the Redeemer</a></li>
</ul>
<h2>What is it?</h2>
<p>The Great Pyramid of Giza is the oldest and largest of the three Pyramids in the Giza, in Egypt. It largely still remains intact.</p>
<h2>Some Facts</h2>
<ul>
  <li>It stands at 139 metres tall.
    <li>
</ul>

Upvotes: 0

Views: 201

Answers (2)

Marc Hjorth
Marc Hjorth

Reputation: 1950

Here you go

I just created a class for your nav

.mainnav

And defined what needs to be styled in that class

Upvotes: 0

Tyler
Tyler

Reputation: 1039

You can just add a class to the ul, and style only lists that have that class. Then you can move any styling that should only apply to that class, in to that class's css entry. You can do the same thing with list items. You can use class names the same way you use the element names. You can also do this the element id's.

.html

<ul class="nav-bar-list">
    <li class="nav-bar-list-item">...</li>
</ul>

.css

.nav-bar-list {
    background-color: #333;
}

.nav-bar-list-item {
    float: left;
}

.nav-bar-list-item a {
    // any other css you want
}

Upvotes: 2

Related Questions