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
Hayden LaBrie
2,913 PointsNot exactly sure how class element works. Can someone please help me understand the concept please. Thank you!!!
I am currently doing the web development course and he has recently introduced the class element. He uses it to change the color of the header which you are on, and when putting your mouse over the other names for the headers. I don't understand why he puts class="selected" only in the first li but affects all of the li's. Sorry if my wording is hard to understand but the point is to show which "tab" you are currently on under the website. Thank you so much for your help!
Here is the code in html: '''
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
// The CSS portion nav a.selected, nav a:hover{ color: #32673f; '''
2 Answers
jag
18,266 PointsHopefully this gives you the overall concept of selectors (class, id, attribute & pseudo-classes).
Andrew Hinton
20,616 PointsThink of a class as your own custom name for a block of code. In this case, the <a> element and anything it contains are now part of the class "selected." So in CSS you can target all those elements with your new custom "class" name.
Say your company buys several Macbooks. They look like every other Macbook on the planet. Then say you add a sticker to each of them with your company logo. Now that Macbook has class="YourCompany." So in future when you want to add software to all your company Macbooks, you'll be able to identify which ones are specific to your business.
In this particular instance, when your viewer is looking at that page, your page will know that link should be a different color, because they're already visiting that page.
Good Luck! Hope this helps.
Hayden LaBrie
2,913 PointsWhy did I only put the class element in the first "li" but it affects all of the other "li's" inside the "ul's"?