Why give individual li elements a class for main nav bar? [closed]

Question

I'm reading HTML on some large websites just to see how others assemble their code. On playmonopoly.us (and many other sites) the main navigation bar is created with li classes.

Question:

• If a li element is only one out of several on a main nav bar, why would someone want to use a class for each li element?
• What exact benefit does having classes for each li give?

Wouldn't it make more sense to give each ul a class, then target each ul within CSS if styling the li element was the goal of creating classes? What am I missing with the whole li class thing?

Answer 1

One role of giving a class to a navigation li is to display which li is the active one for page navigation. This might be a different colouor or different background to demonstrate that the link is the active page.

This can be done easily in php, in which the active page is named prior to calling the header / nav.

for example - setting the active page variable:

<?php $activePage="home";?>

// other code related to the nav menu //include the common header / nav file

<li class="<?php if($activePage =="home"){echo"active";}?>"><a href="index.php">HOME</a></li>

What this does is allow a common nave menu that then indicates the active page you are on and can therefore be styled accordingly. And each page in the nav menu can have the active class if it is the active page. Therefore there is a single nav menu that performs differently on different pages according to the setting of the activePage class.

Incidentally- the $activePage variable can be used in the footer as well if you have navigation elements in the footer - and can therefore allow styling of the active page link at the top and bottom of the page.