Why give individual elements a class for the main navigation bar?

Question

I read HTML on some large sites to see how others compose their code. On playmonopoly.us (and many other sites), the main navigation bar is created using the li classes.

Question:

• If the li element is only one of several in the main navigation bar, why does someone want to use a class for each li element?
• What is the exact advantage of having classes for each li ?

Wouldn't it make sense to give each class ul a and then target each ul in CSS if styling the li element was the goal of creating classes? What did I miss with the whole li class?

Answer 1

One role of providing a class for li navigation is to display which one is active for page navigation. It can be a different color or a different background to demonstrate that the link is an active page.

This can be done easily in php, in which the active page is called before the / nav header is called.

for example - setting the active page variable:

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

// other code associated with the navigation menu // include a common header / navigation file

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

What this does allows a general level menu that indicates the active page you are on, and therefore can be styled accordingly. And each page in the navigation menu can have an active class if it is an active page. Therefore, there is one navigation menu that runs differently on different pages in accordance with the setting of the activePage class.

By the way, the $ activePage variable can also be used in the footer, if you have navigation elements in the footer - and therefore allows you to style the link of the active page at the top and bottom of the page.

Answer 2

Another reason to give each li class when using javascript / jquery with your navigation:

If you do a lot of manipulation, performance can be a problem, so instead of writing

 ul.main-nav > li 

all the time you feel better:

 .main-nav-item 

Answer 3

This may be useful later for scripting. And it depends on your preference. You can set the id or class for <ul> or <ol> , and then style <li> with the li:nth-child() parameter. You can style all <li> if you need the same parameters without typing li:nth-child() each time, defining a class.