CODEWITHSUNDEEP
htmlcss
KrizD
KrizD

Reputation: 119

CSS targeted theming

I was wondering if there was a way in CSS to package styles under a specific div to be different. Here is an example of what I would like to accomplish:

<html>
<body>
  <div id="enableTheme">
     <p>some themed html</p>
  </div>
  <div id="disableTheme">
     <p>some none-themed html</p>
  </div>
</body>
</html>

The css would do something like this:

#enableTheme{
    p{
       css styles
    }
    label{
       different styles
    }
    div{
       even more different styles
    }
    ...
 }

where everything under the div that has the id "enableTheme" would be themed the way I want it to be.

Thank you in advance for the help

edit: sorry guys I wasnt very clear in my question. I know about the 

#enableTheme p{ 
   //Styles
}

but my problem is I have a hude css file that I dont want to have to add the "#enableTheme" one by one to each element, thats why I was wondering if there was a way to do it globally for a pack of styles that I had premade.

Upvotes: 0

Views: 68

Answers (5)

JGrubb
JGrubb

Reputation: 889

You're pretty much there. Try

#enableTheme p {
  /* styles */
}

#enableTheme label {
  /* and on and on */
}

Incidentally, if you used SCSS, what you'd written would output exactly the CSS you want for this situation.

Edit: ...but I'd recommend learning more about CSS before getting into Less/Sass/SCSS

Upvotes: 1

j08691
j08691

Reputation: 207913

In regular CSS no, you can't do that. But you could do something like:

#enableTheme p{
       css styles
}
#enableTheme label{
       different styles
}
#enableTheme div{
       even more different styles
}

Note that there are options, like LESS and SASS, that allow you to do what you proposed.

Upvotes: 0

stffndtz
stffndtz

Reputation: 523

try 

#enableTheme p {

}

#enableTheme label {

}

#enableTheme div {

}

or, if they're direct descendants, you may use

#enableTheme > p {

}

#enableTheme > label {

}

#enableTheme > div {

}

Upvotes: 0

KRyan
KRyan

Reputation: 7608

(this is probably a duplicate, but anyway)

Yes, this is the Descendant Selector. Just do this:

#enableTheme p
{
   css styles
}

#enableTheme label
{
   different styles
}

#enableTheme div
{
   even more different styles
}

Upvotes: 0

Setthase
Setthase

Reputation: 14408

Use that syntax: 

#enableTheme p{
   css styles
}
#enableTheme label{
   different styles
}
#enableTheme div{
   even more different styles
}
...

Upvotes: 0

Related Questions