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.)?

Answer 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>