Jonathan Haslett

Here is an old post from an old (now defunct) LiveJournal. This post was originally from December 2007 and was a huge personal breakthrough in relation to CSS.

Today I learned how to do a couple cool things with Style Sheets, more specifically how to code pop ups and state based effects WITHOUT the need for javascript.

For example lets say that I had a box (div) called ‘menu’ and in that box was a list (ul) of menu items each with the class “item”.

In the style sheet I could write:

#menu ul .item{display:none;}

This translates to:

Do the following to all things with class “item” that are in an unordered list (ul) that are in the box called ‘menu:

• Make the item invisible so that you can’t see it in the browser.

An then we can write:

#menu ul:hover .item{display:block;}

Which roughly translates to:

Do the following to things with the class “item” that are inside a unordered list that has the  cursor hovering over it that is inside the box called “menu”:

• Show the item as a box.

The key component here is styling the tag within  an items based on the state of the parent tag.

Here is the link to the full tutorial which also includes a working demo as well as a sample style sheet.