Is there a better way to do CSS classes "within CSS classes"?

Question

The best way to ask my question is to lay out a scenario.

Say I have the following markup:

<div class="box">
    <div class="jack">

    </div>

    <div class="jill">

    </div>
</div>

Right, so the way I was taught to affect the child through the parent was with something like this:

.box .jack, .box .jill{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

My question stems from my recent learning of responsive CSS, where I've seen lines such as: @media only screen{}. It has (please forgive any botched terminology) CSS listed inside CSS?? (Curly Brackets within Curly Brackets).

Is there a way to affect the aforementioned markup with something like that? Example:

.box{
     .jack{
          /*Mooooom, I don't want to go shopping for school clothes*/
     }

     .jill{
          /*Yay, shopping! I need all the new styles!!!*/
     }
}

I've experimented a couple times in a JSFiddle, and it didn't work. My hope is that I'm missing some kind of key word or character. Or is this just not possible to affect elements with CSS in this format?

P.S. I do not know the term of what I am looking for, so Google isn't helping. If you know that this is already answered, please link me to it!

I came across some CSS like your example the other day and it worked fine for me, can you paste a fiddle? — codeguy
– codeguy, Commented Oct 23, 2015 at 14:47
You're confusing media queries with CSS preprocessors like SASS and LESS — j08691
– j08691, Commented Oct 23, 2015 at 14:47
You can achieve that using SCSS. But then you'll need a tool like koala... — Jeroen Bellemans
– Jeroen Bellemans, Commented Oct 23, 2015 at 14:49
@j08691 I was just using media queries as an example of the "bracket within bracket" setup. I just liked the cleaner and more organized way it looked when I read it, and hoped it was possible to do regular CSS like that. — Kyle
– Kyle, Commented Oct 23, 2015 at 15:18

Paulie_D · Accepted Answer · 2015-10-23 15:00:17Z

3

No...there is not.

You can use CSS preprocessors like SASS/SCSS or LESS (and others, Stylus) which make writing code easier and quicker but, in the end, they still compile to the same CSS.

SASSMeister Demo

SASS Info Link

LESS Info Link

6 Current Options for CSS Preprocessors - 11/2014

answered Oct 23, 2015 at 15:00

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

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

1 Comment

Kyle Over a year ago

Ah, oh well. It wasn't so much necessary as it was that it was easier to read my code formatted like this. Thank you!

Collectives™ on Stack Overflow

Is there a better way to do CSS classes "within CSS classes"?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related