How do I make CSS styles dependant on its parent element

Question

I was wondering if it is possible to define the styles of an element depending on the value of the body ID.

It is difficult to explain but something like this would be ideal:

HTML:

<body id="home">

CSS:

body#home {
  a { /* code here */ }
  p { /* code here */ }
}

body#profile {
  a { /* different code here */ }
  p { /* different code here */ }
}

I know I can do this:

body#home a { /* code here */ }

but that becomes very repetitive.

I will be looking forward to your responses,

Peter

brian · Accepted Answer

You can do this if you use a CSS framework like SASS or LESS

Here's the documentation on how to do this with LESS. Hope this helps.

Diodeus - James MacFarlane · Answer

IDs are supposed to be unique, so #home { ... } is acceptable.

Then and child elements would be:

#home .myClass { ... }

This technique if often used to re-skin pages be simply changing the ID or class on a body.

Donate For Us