Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by gary peart
gary peart
6,496 Points

Can a class or id be given to a <nav> element?

Can the <nav> tag be given a class or id?

I only ask, because after creating the example below I can't seem to get the .main-nav associated to <nav> to display inline with the .logo associated with the <h2>. If I remove both <nav> tags and give the <ul> the class of .main-nav, the inline property in the CSS works fine and displays beside the <h2>.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First HTML Page with Styling</title>
  <link rel="stylesheet" href="myfirstHTML.css">
</head>
<body>
  <div class="wrapper">
    <header>
      <div class="container">
        <h2 class="logo"><a href="">Site Name Here</a></h2>

        <nav class="main-nav">
          <ul>
            <li><a href="">Main</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Help</a></li>
          </ul>
        </nav>

      </div>
    </header>

  </div>
  <footer>
    <div class="container">
      <p>2016</p>
    </div>
  </footer>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/************************
       GENERAL
************************/

.wrapper{
  min-height: calc(100vh - 20px);
}

footer{
  min-height: 20px;
}

/************************
 COLOURS / SPACING
 ************************/
header,
footer{
  background: red;
  padding: 10px 0;
}

.main-nav li{
  background: white;
}

.container{
  padding: 0 1em;
}

.logo {
  text-align: center;
}

.main-nav li{
  margin: 4px 0px;
  padding: 2px 0;
  border-radius: 6px;
  text-align: center;
}

/************************
       &media
************************/

@media (min-width: 769px){

  .logo,
  .main-nav,
  .main-nav li{
    display: inline;
  }

  .main-nav li{
    background: none;
  }
}

Any help is greatly appreciated, thanks!

2 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yes you can.

When selecting in CSS, you select class with a dot, and an id with #.

In HTML and id looks like id="name". ANd class looks like class="name"

Go throw the basics again if you don't understand the concepts.

gary peart
gary peart
6,496 Points
gary peart
gary peart
6,496 Points

I thought this would be the case.

I've just discovered my confusion was created by a coding error. I couldn't see what I was doing wrong last night, but figured it out this morning. I was simply not applying display:inline to the <ul>. .