Two nav elements in CSS

Question

Problem:

Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.

HTML code:

<!-- Global navigation -->
<nav role="main">
    <ul>
        <li><a href="index.html" class="active">Startpage</a></li>
        <li><a href="cars.html">Cars</a></li>
        <li><a href="about.html">About us</a></li>
    </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
    <ul>
        <li><a href="ferrari.html" class="pressed">Ferrari</a></li>
        <li><a href="bmw.html">BMW</a></li>
        <li><a href="volo.html">Volvo</a></li>
    </ul>
</nav>

CSS code:

How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?

Solution 1

You could do something like this:

nav ul li {
    width:100px;
    display:inline-block;
    margin:5px;
    padding:5px;
    color:#333;
    text-align: center;
}
nav[role="main"] ul li {
    background-color:#aaa;
}
nav[role="sub"] ul li {
    background-color:#eee;
}

 <!-- Global navigation -->
<nav role="main">
    <ul>
         <li><a href="index.html" class="active">Startpage</a></li>
         <li><a href="cars.html">Cars</a></li>
         <li><a href="about.html">About us</a></li>
    </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
    <ul>
         <li><a href="ferrari.html" class="pressed">Ferrari</a></li>
         <li><a href="bmw.html">BMW</a></li>
         <li><a href="volo.html">Volvo</a></li>
    </ul>
</nav>

Solution 2

Not sure what you mean by

same appearance but different styling

You can use the role attribute as a CSS selector, as shown here:

nav[role="main"], 
nav[role="sub"] {
  background: #222;
  color: #f40;
}

nav[role="main"] a, 
nav[role="sub"] a {
  color: #fff;
}

<nav role="main">
  <ul>
    <li><a href="index.html" class="active">Startpage</a>
    </li>
    <li><a href="cars.html">Cars</a>
    </li>
    <li><a href="about.html">About us</a>
    </li>
  </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
  <ul>
    <li><a href="ferrari.html" class="pressed">Ferrari</a>
    </li>
    <li><a href="bmw.html">BMW</a>
    </li>
    <li><a href="volo.html">Volvo</a>
    </li>
  </ul>
</nav>