Muffinresearch Labs by Stuart Colville

Classes on the body tag | 6 Comments

Posted in CSS on 16th June 2005, 12:26 am by

In Doug Bowman’s second @media presentation he mentioned utilising classes on the body element to be able to affect the layout of the entire page. This simple technique uses descendant selectors in such a way that an entire page layout can be altered by adding or changing a class applied to the body tag.

For example visualise the following (simplified) stylesheet


  #maincontent {
    float : left
  }

  #secondarycontent  {
    float  : right
  }

  .home #maincontent {
    float  : right
  }

  .home #secondarycontent  {
    float  : left
  }

Assuming maincontent and secondarycontent are two divs, by adding the class ‘home’ to the body tag (<body class=”home”>), the two columns could be reversed. When you think about it, this method can be used to radically change the entire site layout with only one change to the markup and without requiring extra stylesheets. It’s this exact method used to alter the look of each of the sections on Doug’s site http://www.stopdesign.com

Post Tools

  • http://www.iamthepenguin.com Mike

    That’s pretty interesting. I might have a play around with this idea at the weekend.

  • http://www.nefariousdesigns.co.uk Tim

    I would hasten to add, this method really comes into it’s own when you utilise semantic naming techniques (use #secondaryContent instead of #rightColumn)…

    Swapping core elements around becomes really easy. For instance, if you want subnavigation on the right hand side on one page but on the left hand side in another.

    Like I said: Ace!

  • http://www.nefariousdesigns.co.uk/ Tim

    You really need to sort out your carriage return replacement in the comments, Stupot. It really gets on my wabs!

  • http://www.muffinresearch.co.uk Stuart

    Yep I’d been meaning to get round to that.

    Linebreaks are now automagic!

  • Pingback: Dynamic Semantic Classes · plaintxt.org

  • wimal

    I am amazed that I finally found what I wanted. Many Thanx to you. Everyone was saying it slows down to use two style sheets and didnt give a solution. with this technique I can use two different backgrounds in the body tag for home page and other pages. Thanx again.

GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Ubuntu: add-apt-repository: command not found|(2)

When you’re using a minimal Ubuntu install if you find the ‘add-apt-repository’ command is missing (it’s useful for adding PPAs and other repositories), then simply run:

sudo apt-get install python-software-properties

Photos on Flickr

© Copyright 2004-12 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.534s.