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

CSS jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Posted by Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

I need a CSS refresher! how come the class="selected" changes to links clicked?

I do not meen the option selected property, but class of <li> element, the class changes and gets added to <li> of clicked link. how is that happening?

3 Answers

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

Each link you click takes you to a different page with different markup. Say you have two links. Home and support. The markup for the home page (lets call it index.html) will have the selected class applied to the link for home. The markup for the support page (support.html) will have the selected class applied to the support link.

So since each different page has a different link with the selected class the styles will be applied accordingly.

I hope that helps and if it doesn't i'd be more than happy to provide some code examples.

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

Got it! took some repeat readings, but i understand that each page is seperate made and assigned the class accordingly.

Katherine Duncan-Welke
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Katherine Duncan-Welke
iOS Development with Swift Techdegree Graduate 33,030 Points
Katherine Duncan-Welke
.a{fill-rule:evenodd;}techdegree seal-36
Katherine Duncan-Welke
iOS Development with Swift Techdegree Graduate 33,030 Points

The links change appearance when the class of "selected" is applied to them, because in the css file that class has specific styling that will make it look different from unselected links. The word "selected" itself is simply a class name - you could use any other name to label those links and style them in the css file.

If you look in the css file for the project you will see .selected in there, along with the associated css styling that makes the links look different when that style is applied. The class itself won't make any changes to your links on its own unless there is styling applied to it in the css, so that name in particular makes no implicit changes.

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

thanks for reply kate, i understand your point, but my question is that how come the class "selected" is choosen automatically for the link selected.

Like if click support , the support element will get ".selected" and when i click on about the ".selected" takes the ".selected" away from support and give to about link clicked. Hope it makes my question clear!

Volodymyr Boretskyi
Volodymyr Boretskyi
9,094 Points
Volodymyr Boretskyi
Volodymyr Boretskyi
9,094 Points

Its not set automatically. It was set already in html before the project. Each page .html has different <a> tag in the menu bar set to class="selected". Check every page html document. Its different on each page.