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

PHP Build a Simple PHP Application Creating the Menu and Footer Including the Header

Posted by Venkataraman Chandrasekhar
Venkataraman Chandrasekhar
2,061 Points

echo "on"

Here is a line of html from header.php:

<li class="shirts <?php if ($section == "shirts") { echo "on"; } ?>"><a href="shirts.php">Shirts</a></li>

What effect does

<?php if ($section == "shirts") { echo "on"; } ?>

have? In other words, why is this needed?

4 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points 
          .header .nav li.on a {
                   text-decoration: underline;
          }

.header means you go inside the element where the header class is assigned, then you have a space and .nav which means you go as well inside the element which has the nav class assigned.

In other words you go inside the element with the nav class which is nested inside the element with the header class. That's why the space between both is important.

Another exemple:

          p a{
               color:red;
          }

This means, select all anchors inside paragraph and color them in red. So once again the space is important.

After that you have li.on, basically It only selects li where the on class is applied, not the others ones !!!

He could have done this instead:

          .header .nav .on a {
                   text-decoration: underline;
          }

That would work, but the fact he specifies li.on makes it more specific, It's to be sure to select only li with the on class applied and not all the elements with the on class you see ?

And finally there is a space and the letter 'a', which means he selects the anchors inside these li with the on class applied.

To sum up, the whole selector, it means:

Select me all the anchors nested inside li tags which have the on class applied, which are nested inside the tag with the nav class applied which is as well nested inside the tag with the header class.

The html to express it.

 <div class="header">
    <div class="nav">
         <ul>
          <li class="on"><a href="#">Home</a></li>  <!-- THIS ONE WILL BE SELECTED-->
           <li class=""><a href="#">Details</a></li>
           <li class=""><a href="#">Contact</a></li>
        </ul>
   </div>
</div>

Finally, I think you should take a look at the CSS deep dive, that would help you to get all of these little things.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

It's needed for a single thing. Just to add "on" to the class attribute. 'on' in fact is a css class. It applies some styles.

Instead of 'on' he could have named this 'active' and create some CSS for the active class.

This explains the comparison, as at the top of each page you specify the value of $section.

If the assigned value to $section is equal to the one inside your comparison, you put the "on" class, and thanks to it, the styles are applied.

If not, nothing happens :) It remains as it is, with the default styles.

Play with it, remove the code and try, you'll see the difference.

Venkataraman Chandrasekhar
Venkataraman Chandrasekhar
2,061 Points

So, "on" is a css class created by the course developer (and he could just as well have created a css class called "active")?

Also, in which file is the css class "on" defined?

Thanks.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

You got it that's it. For the css file, I don't have the project locally anymore, but from what I remember, in a css folder. Look for it, won't be difficult to find.

Venkataraman Chandrasekhar
Venkataraman Chandrasekhar
2,061 Points

Thanks again, Geoffrey.

Here is the related line in style.css:

.header .nav li.on a {text-decoration: underline;}

I don't understand css well enough to figure this out I understand what the html does.

So, the header will assign a class name of either "shirts on" or "shirts" depending on whether the page being loaded is the shirts page or not. The above css causes the underlining whenever the li has "on" as a part of its class name -- is this correct?

Thanks, again.

Venkataraman Chandrasekhar
Venkataraman Chandrasekhar
2,061 Points
Venkataraman Chandrasekhar
Venkataraman Chandrasekhar
2,061 Points

Great help. Thanks.