Define CSS Rules in Element Conditional

Question

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

Was hoping for a solution that would help us with our WordPress plugin. Since we are developing for WordPress we are preparing for environments we will not be able to install LESS or Sass on. Are there any plans to add these powers into CSS? — atwellpub
– atwellpub, Commented Feb 5, 2014 at 7:01
Why not just use selectors like #container-id-1 .the_content — Itay
– Itay, Commented Feb 5, 2014 at 7:01
We were printing multiple html containers with similar id and class names but with varying style definitions. Because the # of containers and variations of styles were dynamic some styles were overwriting others and I needed a way to make styles unique and was thinking I could enclose the styles in a CSS conditional when I printed them in the header. But the conditionals do not exist for traditional CSS so we had to discover a different way to make sure there were no conflicts. At the end of the day we gave the <style> containers unique ids and used jquery to delete the ones we did not use. — atwellpub
– atwellpub, Commented Feb 5, 2014 at 21:16

Itay · Accepted Answer · 2014-02-05 06:56:03Z

1

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

See this for example: LESS Scopes

answered Feb 5, 2014 at 6:56

Itay

16.8k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Collectives™ on Stack Overflow

Define CSS Rules in Element Conditional

2 Answers 2

Comments

JSFiddle Example

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related