CODEWITHSUNDEEP
htmlcss
Daan
Daan

Reputation: 2799

Apply multiple CSS rules with one selector

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;
}

Upvotes: 1

Views: 2238

Answers (4)

sebastienbarbier
sebastienbarbier

Reputation: 6832

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.

Upvotes: 4

Bolza
Bolza

Reputation: 1944

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.

Upvotes: 1

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

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.

Upvotes: 1

Drown
Drown

Reputation: 5982

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.

Upvotes: 1

Related Questions