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

Posted by kyle travelet
kyle travelet
5,669 Points

Intro to PHP (shirts 4 mike), underline anchor when page is selected

Hi all,

Just recently started to PHP track so I'm a total newb, sorry.

While creating the "Shirts 4 Mike" website in the PHP track the instructor used the code below. When you open the "Shirts" link the header will underline "shirts" to show the user what page they are currently on.

Seems easy enough. After inspecting with chrome the CSS below is what underlines the "shirts" text. What I dont understand: why is the css li.on and not li.shirts on. The php echo shouldn't replace the "shirts ", right?

Thanks!

CODE:

<div class="header">

  <div class="wrapper">

    <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

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

CSS:

.header .nav li.on a {text-decoration: underline;}
tim221
tim221
18,657 Points

The php echo shouldn't replace the "shirts ", right?

No, the li element would either have class="shirts " or class="shirts on" depending on the value of $section.

why is the css li.on and not li.shirts on

If you used li.shirts on, the space between li.shirts and on means it's a descendent selector, targeting an on element nested within an li.shirts element. Can you see why that wouldn't work?

You could use li.shirts.on, but that would only work for the shirts menu item, what about the others? Better to have a single rule that works for all the menu items. Does that make sense?

kyle travelet
kyle travelet
5,669 Points

Thanks Tim!

I understand that the "li.shirt on" wont work because of the space. So if you create the following classes: "1 test" "2 test" "3 test"

You can just call .test in CSS and it will automatically apply to all 3 classes?

Thanks again!

tim221
tim221
18,657 Points

So if you create the following classes: "1 test" "2 test" "3 test" You can just call .test in CSS and it will automatically apply to all 3 classes?

Yes that's correct, although technically the classes are the individual items, in your example 1 is a class, test is a class, and so on. Having said that, classes can't start with a digit, so 1 would be invalid, but you get the idea.

CSS selectors are like rules, they can be general or specific. Selecting .test is very general - anything with the class test will be selected.

.header .nav li.on a is very specific, only a elements, inside a li with on class applied, only inside an element with the nav class applied, only inside an element with the nav class applied.

I don't know if you've done any CSS courses here but I recommend giving them a look.

kyle travelet
kyle travelet
5,669 Points

Awesome, thanks Tim! I did take some CSS when I started the web design track. However I switched to PHP just out of interest (still has intro to HTML and a little bit of CSS).

tim221
tim221
18,657 Points

Cool, good luck and I hope you enjoy the course!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tim W,

Please consider re-posting your comment as an answer to the question. There's an answer box further down the page.

kyle travelet , you have the option of selecting "Best Answer" if Tim decides to re-post. This will let others know that the problem has been solved.

1 Answer

tim221
tim221
18,657 Points

The php echo shouldn't replace the "shirts ", right?

No, the li element would either have class="shirts " or class="shirts on" depending on the value of $section.

why is the css li.on and not li.shirts on

If you used li.shirts on, the space between li.shirts and on means it's a descendent selector, targeting an on element nested within an li.shirts element. Can you see why that wouldn't work?

You could use li.shirts.on, but that would only work for the shirts menu item, what about the others? Better to have a single rule that works for all the menu items. Does that make sense?

(thanks Jason)