CODEWITHSUNDEEP
css
atwellpub
atwellpub

Reputation: 6020

Define CSS Rules in Element Conditional

I'm looking to define CSS like this. Is it possible? 

#container-id-1
{
   .the_content {           
        font-size: 20px;
        text-align: left;           
    }

    .the_footer {
      text-align:center;
    }
}

#container-id-2
{
    .the_content {          
        font-size: 17px;
        text-align: right;          

    }

    .the_footer {
        text-align:center;
    }
}

I found this resource but since it came out there may be new developments:

Group css tags within a single div

Upvotes: 0

Views: 57

Answers (2)

Liftoff
Liftoff

Reputation: 25392

The only way to do this in straight CSS is to concatenate the names, e.g.:

#div1.class1 { //Div with id 'div1' and class 'class1'}
#div1.class2 {}
#div2.class1 {}
#div2.class2 {}

Note that this is if the target has both the id #div1 and the class class1

If you want to do child elements, then put a space in between the id and class

#div1 .class1 { //Child element of div '#div1' with class 'class1'}
#div1 .class2 {}
#div2 .class1 {}
#div2 .class2 {}

So to clarify, the first example would apply to a div like this:

<div id="div1" class="class1"></div>

And the second example will apply to a div like this:

<div id="div1">
    <div class="class1"></div> <-----It applies to this one
</div>

Based on your question, I think you want the second approach. Check the fiddle for my example in your context.

JSFiddle Example

Upvotes: 0

Itay
Itay

Reputation: 16785

You can't do it with normal CSS, you can use dynamic style languages like LESS though.

See this for example: LESS Scopes

Upvotes: 1

Related Questions