Smashing Test

This CSS3 demo displays how useful first-child and last child are when it comes to styling menus. The source for the menu on this demo is very very basic.

<nav>
	<ul> 
		<li><a href="index.php">Home</a></li> 
		<li><a href="aboutus.php">About Us</a></li> 
		<li><a href="staff.php">Staff</a></li> 
		<li><a href="contact.php">Contact Us</a></li> 
	
	</ul> 
</nav> 

All well and good except what do we do if we want to style the current page?

Traditionally I would add an extra class to the current page link like class="this" but this is a grotty way of going about it. The link is semantically significatn because of the page that it goes to.

With a little php to find out what page you're already on and you can style the links that find that address in the href tag.

<?php 
$thispage = basename($_SERVER['REQUEST_URI']); ?>
	<style>
	
		nav a[href="<?php echo $thispage; ?>"] {
			background: transparent;
			border: solid black;
			border-width: 1px 1px 0 1px;
		}
		
		nav ul li:first-child a[href="<?php echo $thispage; ?>"]{
			border-color: black;
			border-width: 1px 1px 0 0;
		}
		
		nav ul li:last-child a[href="<?php echo $thispage; ?>"]{
			border-color: black;
			border-width: 1px 0 0 1px;
		}

	</style>	
?> 	

The only problem is that you can't write php straight to an external stylesheet so those couple of lines need to be in your php file inside a style tag.