How can I apply a CSS class to an element with a given id, without modifying the element?

Question

I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.

I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)

Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.

---

Edit to clarify:

The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago

Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.

So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.

Answer 1

I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?

#header{
  position:relative;
  ...
}

Answer 2

Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:

semantic_styles: # i dont think this is the right key definition but you get the idea
  '#footer,#navigation': ['span-12','clearfix']
  '#footer': ['push-1']
  # etc...

Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:

#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */} #footer {/* declarations from .push-1 */}

But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.

Answer 3

If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?

Answer 4

I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).

However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under

/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
    width: 301px;
}

Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.

You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.