How can I apply CSS style changes just for one page?

css css-selectors css-sprites
Asim Zaidi picture Asim Zaidi · Apr 12, 2011 · Viewed 53k times · Source

I have two css files:

  1. A main file (main.css)

  2. A specific page file (page5.css). My page.css contains main.css (@import url(main.css));)

My main.css has this as one part of it that sets the height of the page

#content {
    background:url(../images/image.png) no-repeat;
    width:154px;
    height:356px;
    clear:both;
}

This works fine for all the other pages, but at page 5, I need a little bit more height.

How would I go about doing it?

Answer

mVChr picture mVChr · Apr 12, 2011

You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:

<body class="page5">

Then in your CSS you could apply:

.page5 #content {
  height: XXXpx;
}

And it would only apply to that page as long as it occurs after your main #content definition.

Related questions

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More
not:first-child selector

I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the …

Read More