How simple CSS breadcrumbs work.

Question

I am trying to imitate this tutorial about creating a simple Apple-themed breadcrumb found here: http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx

Even after looking at the updated example and downloading the source code from here: http://www.lostsockdesign.com.au/apple-breadcrumb/index.html

I cannot tell how only the HTML and CSS "knows" which page it is currently.

Obviously, if your browser is pointed to "http://www.lostsockdesign.com.au/apple-breadcrumb/index2.html" the browser knows you are on this page, but what part of the HTML or CSS specifies that the breadcrumb should leave out the graphics for the subsequent pages, and fade out the current page graphic?

Sorry for the simple question.. xD

UPDATE:

OK, now that that's solved, anyone have a suggestion for the simplest way to effect a script to work with this tut?

Answer 1

It doesn't.

That tutorial is simply for styling, not for generating the breadcrumbs; you have to do that part yourself, through some sort of scripting or manually.

Re: Update

Breadcrumbs are essentially the current path down the tree that is your site. Start with a site map (not in the XML, SEO sense, but in the actual page structure of your site. For instance:

Home
JavaScript
    Vanilla
        Gallery
        Lightbox
        Dice Roller
    jQuery
        Cycle
        Click Tracker
Blog
    RSS
    Web Development
        Object Oriented CSS
        Currying Functions in JavaScript
        CSS Reset Files
    Gaming
        Review: Super Mario Bros.
        Camping Strategy in Oregon Trail
        So Your Mom Wants to Play Wii Golf
Portfolio
    DEA Website
    We <3 Kittens
    Nobody Likes IE6

So, if you're on the page "CSS Reset Files", you follow the tree from the (not shown) root, and show every level you find in the breadcrumbs, resulting in this:

My Site -> Blog -> CSS -> CSS Reset Files

This data can be stored in the database and pulled out using the server side language of your choice, or it could be automatically generated based on directory structure using server-side or client-side scripts, or you could manually code them into each of your pages.

How you do it is entirely up to you, but this is the basic concept.

Answer 2

You don't use HTML and CSS (CSS3 has some limited features like this, but I don't think they're quite ready for prime time yet) to figure out what page you are on. Usually server side software (such as a CMS) is used to output the breadcrumbs, complete with CSS class names that indicate which page is the current one etc.