-1

I need to style body tag differently based on another element’s class that is set dynamically on load. Is it possible to select body as a parent element of another element without using JS?

Under condition #1 the page might look like this:

<body>
…
    <div class=”first-version”>…</div>
…
</body>

Under condition #2 the page might look like this - different class on div:

<body>
…
    <div class=”second-version”>…</div>
…
</body>

Pseudocode, this doesn’t work but gives you an idea what I’m trying to do (create a theme of sorts):

body[contains div.first-version] {
    margin:100px;
}
body[contains div.second-version] {
    margin:200px;
}
ElenaB
  • 1
  • 3
  • why don't you give the body tags an ID? – Lexib0y Jan 20 '15 at 15:20
  • What do u intent to ask???? Question Not Clear. – Vaibhav Magon Jan 20 '15 at 15:20
  • 1
    I think you would like to look at: http://stackoverflow.com/questions/2326499/apply-css-styles-to-an-element-depending-on-its-child-elements – Michael Marr Jan 20 '15 at 15:21
  • Multiple body tags? But...why? – rdiz Jan 20 '15 at 15:24
  • It's not multiple body tags - just 2 versions of how page might render. The class on div is rendered dynamically based on JSON page config. – ElenaB Jan 20 '15 at 15:30
  • Assigning body tag an id wouldn't make it any easier. You still need to somehow assign 2 different styles to the body tag based on the style of the child element. – ElenaB Jan 20 '15 at 15:33
  • if its not multiple body tags then you can always select it directly. – Prakhar Thakur Jan 20 '15 at 15:41
  • I know I can select it directly but I need to assign a different style to body tag based on another elements style. If div has style 1 then body should have style A, if div has style 2 than body should have style B. – ElenaB Jan 20 '15 at 15:50
  • If I understood correctly you want to set style of the body depending on the class of a div contained inside the body itself with pure CSS. I'm afraid that isn't possible since [there are no parent selectors on CSS](http://css-tricks.com/parent-selectors-in-css/), you would need to use JavaScript to navigate upwards. The `:root` pseudo-class you're using will not work with another selector preceding it. It will always be the `` element. – bostero2 Jan 20 '15 at 15:56
  • @bostero2 - thanks. Yeah, I tried :root, it actually works to select body (:root body) but you're right you can't precede it with anything. I guess I'll use JS then. – ElenaB Jan 20 '15 at 16:01

3 Answers3

0

Use different classes for the body styling and you SHOULD use Javascript.

nasserui
  • 86
  • 4
0

Try this template:

HTML

<body id="the_body">
<input id="template_1" value="Template 1" type="button"/>
<input id="template_2" value="Template 2" type="button"/>
</body>

CSS:

.template_1{
    color:red;
}
.template_2{
    color:blue;
}

JS (use jQuery):

$(function() {
      $("#template_1").click( function()
           {
             $("#the_body").html("<p class='template_1'>template 1</p>");
           }
      );
    $("#template_2").click( function()
           {
             $("#the_body").html("<p class='template_2'>template 2</p>");
           }
      );
});

DEMO

Zulhilmi Zainudin
  • 9,017
  • 12
  • 62
  • 98
  • Thank you. This is closer to what I need but not exactly. And I'm not sure why you need to assign id to body. Why can't it be just: $("body").html("

    template 2

    ");     – ElenaB Jan 20 '15 at 15:39
  • and

    tag only can show up 1 time. So, give them ID so that you can call them in which condition u need. Replace my

    template x

    line with your own HTML codes based on body template(s).

     – Zulhilmi Zainudin Jan 20 '15 at 15:41
0

Ok, thanks everyone for your help. That was very fast, I didn't expect this. Sorry if question wasn't clear. (This is my first time posting a question Stack Overflow).

It looks like pure CSS solution is not possible in this case and I should just use jQuery. Michael Marr posted the link to the jQuery solution that I'm going to use:

Apply CSS styles to an element depending on its child elements

Community
  • 1
  • 1
ElenaB
  • 1
  • 3