Apply multiple CSS rules with one selector

Question

If for example, I have a lot of CSS styles that only have to apply to objects within a div #container. Is it possible to instead of write #container in front of all, have another type of selector? So I don't have to write it for EVERY object within the div #container?

HTML

<div id="container">
    <div class="letter">a</div>
    <div class="letter">b</div>
    <div class="number">1</div>
    <div class="number">2</div>
</div>
<div class="letter">c</div>
<div class="number">3</div>

CSS

.letter {
    font-size:25px;
    color:green;
}
.number {
    font-size:30px;
    color:red;
}

I want to write a rule for every .letter and .number within #container.

Ofcourse I'm only reproducing my issue here, but is there a possibility to change the rules of .letter and .number so it applies only to #container without having to change it 2 times (2 times in this reproduction)? (In my issue it's about 30 objects).

I tried a #container selector before those rules, but without succes. It breaks the styles.

My CSS attempt:

#container {
    .letter {
        font-size:25px;
        color:green;
    }
    .number {
        font-size:30px;
        color:red;
    }
}

Does anyone know a solution or do I have to manually apply #container in front of every rule like this (which I want to avoid cause it's a lot of work!):

#container .letter {
    font-size:25px;
    color:green;
}

#container .number {
    font-size:30px;
    color:red;
}

You need to give a look at less and sass, it is going to blow your mind ;) — sebastienbarbier
– sebastienbarbier, Commented Apr 29, 2015 at 14:46
@birdspider I guess it is, because the developers at my company don't use this extension at all. — Daan
– Daan, Commented Apr 29, 2015 at 14:49
@DaanHeskes, if you the only one writing the css, less (and I assume sass) compiles down to css - so if you are solely responsible for said css you want at least try one of those. As to your question I am not aware of any CSS mechanism for that, but maybe some CSS3 gurus might have a trick up their sleeves. — birdspider
– birdspider, Commented Apr 29, 2015 at 14:51
Am I the only one getting a little confused by reading this? (which I want to avoid cause it's a lot of work!), what's a lot of work about copying and pasting #container 30x, this post surely took more time to write + make up an example than this would have done (in my eyes anyway ^^). — Callum.
– Callum., Commented Apr 29, 2015 at 14:55

sebastienbarbier · Accepted Answer · 2015-04-29 14:59:25Z

4

YES, CSS is quite stupid and simple, you have no other choose than having #container in front of each class.

BUT

Developers are lazy and created a pre-processing language to add some crazy functionality. Currently, two alternatives : SASS and LESS

But using those technology you can write your styles like this :

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

and then automatically generate a CSS file like that :

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

This is called "Nesting" and is only one of the many stuff you will love.

Which one to use between SASS and LESS ?

They are similar, my recommandation is us an existing framework and look which one is available. For exemple bootstrap use LESS and Foundation use SASS ... but both are quite similar.

I use both daily, and have some preference to SASS, but that my own opinion.

edited Apr 29, 2015 at 14:59

answered Apr 29, 2015 at 14:50

sebastienbarbier

6,8424 gold badges34 silver badges57 bronze badges

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

8 Comments

Daan Over a year ago

So if I simply copy and paste my CSS into either of those CSS extensions, and write the code as I tried which failed. It'll then generate the code I want so I can stay lazy?

sebastienbarbier Over a year ago

Mmh ... the best would be to use a task manager like Grunt or Gulp ... first give a quite look at how to use those tools, then may be give a look at Grunt but it is very common to have a grunt task looking at all your .scss or .less files and automatically generating a compile/minimized CSS at each save.

sebastienbarbier Over a year ago

You should start step by step, first use less / SASS to be familiar with, don't rush to fast on task managing if you are not really familiar with them.

Daan Over a year ago

Thanks for all the information, I've heard about these extensions but never really wanted to get into them because for me it wasn't clear what it did. Now it's definitely something I'm going to get into.

sebastienbarbier Over a year ago

Be prepare to save a lot of time, and never being able to go back ;), which is kinda why we hangout on stack overflow, change people's life with such awesome solution. Have fun :D

|

Drown · Accepted Answer · 2015-04-29 14:52:33Z

1

In pure CSS, I can't think of a better way of doing it than what you're already doing - which is a lot of repetitive work as you've pointed out.

Your first "CSS attempt" is the correct approach, but you will have to use SASS or LESS if you want to be able to nest selectors like that. Pure CSS doesn't support it.

I strongly recommand that you look into SASS/LESS, they offer much more than just nested selectors and they will make your CSS coding a lot more enjoyable overall.

answered Apr 29, 2015 at 14:52

Drown

5,9921 gold badge32 silver badges49 bronze badges

Comments

CherryFlavourPez · Accepted Answer · 2015-04-29 14:52:45Z

1

CSS is, by design, a very simple language. There is no way (yet) to achieve what you want with pure CSS.

CSS preprocessors such as LESS and SASS have stepped in to help alleviate the tedium of this and other common problems with traditional CSS (such as variables). Your nested example is exactly right in SASS. These all compile to plain old CSS, but will necessitate a change to your front-end build process.

If you can't make use of a preprocessor, find + replace is your friend.

answered Apr 29, 2015 at 14:52

CherryFlavourPez

7,5546 gold badges48 silver badges48 bronze badges

Comments

Bolza · Accepted Answer · 2015-04-29 14:56:13Z

1

The answer is No.

You can't do that without using a preprocessor like less or sass.

Take a look at SASS for example http://sass-lang.com/guide in the "Nesting" section you can see that's exactly the feature your're looking for.

If you want to try it follow the instructions should be pretty simple.

The same feature is present in the less preprocessor but my opinion is that SASS is much more powerful and flexible so if you have to start from sketch go for this one.

If you can't go for a preprocessor then preceding every selector with #container is the only way you have.

answered Apr 29, 2015 at 14:56

Bolza

1,9542 gold badges21 silver badges45 bronze badges

Collectives™ on Stack Overflow

Apply multiple CSS rules with one selector

4 Answers 4

BUT

Which one to use between SASS and LESS ?

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

BUT

Which one to use between SASS and LESS ?

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related