Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make CSS styles dependant on its parent element

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

like image 685
Peter Stuart Avatar asked Mar 22 '23 10:03

Peter Stuart


2 Answers

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.

like image 112
brian Avatar answered Mar 31 '23 13:03

brian


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.

like image 44
Diodeus - James MacFarlane Avatar answered Mar 31 '23 15:03

Diodeus - James MacFarlane