Nest selectors in CSS

Question

Nest selectors in CSS

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (2 votes)

3

Good, a doubt that I have. Is it possible, using CSS, to nest selectors?

In my project, I have several styles that I have dependent on some selectors that are common in different places, for example:

.menu1 { declaracion menu1 ... }
.menu1 .div1{ declaracion xxxx ... }
.menu1 .div2{ declaracion yyyy ... }
.menu1 .div3{ declaracion zzzz ... }

.menu2 { declaracion menu2 ... }
.menu2 .div1{ declaracion vvvv ... }
.menu2 .div3{ declaracion wwww ... }

Instead of defining them like this, is there a way to nest them so that you do not have to rewrite the first selector? Something like this:

.menu1 {
     declaracion menu1 ...
    .div1{ declaracion xxxx ... }
    .div2{ declaracion yyyy ... }
    .div3{ declaracion zzzz ... }
}

.menu2 {
     declaracion menu2 ...
    .div1{ declaracion vvvv ... }
    .div3{ declaracion wwww ... }
}

I do not know if this is possible with CSS (I do not have SaSS or LeSS in the project). Or if there is another method more effective than doing it like I am doing it. I'm looking for documentation about it but I can not find anything and I do not know if I'm not looking good or can not do it.

Greetings and thanks

css3 css

asked by José González 01.02.2018 в 16:48

source

3 answers

How can I make the first letters of the capitalized words appear? Problem with query like

score 4 · Answer 1

Currently with css itself is not possible.

Properly it is a feature that is available only using preprocessor like SASS, STYLUS or LESS.

However, in the future (still very far) it may exist, although it is not even considered as draft by the w3g, since in the report of the current state of css3, future implementations and other "working drafts" there is nothing that mentions about this or something similar.

There are many ideas in the pipeline such as the @apply rules , but as is "nesting" It does not exist in any official documentation.

score 2 · Answer 2

You need to use some text proprocessor as you have been told, I recommend SASS or LESS.

The nesting structure is:

li {
    propiedades del selector li

    a {
        propiedades del selector a, que viene a ser un "li a"
    }
}

score 2 · Answer 3

Unfortunately, this is not possible so far with pure CSS.

However, if it is possible to do it even if it is done, you will need to use a preprocessor, such as SASS or LESS. These preprocessors allow you to use variables, conditions, loops or even functions.

This way, it allows you to modularize your CSS, since they also allow you to divide your CSS into several files, which will eventually be joined in a single CSS file.

I recommend that you use it in your development environment since it will make it much easier to maintain your CSS and you will have a much cleaner and simpler file. When going to pass it to production, you will compile the code that you have generated with your preprocessor, and you will generate a single pure CSS file, which will be the one you attach as a style sheet to your final project.

In your case, and using SASS, the example would be exactly as you defined it:

.menu1 {
     declaracion menu1 ...
    .div1{ declaracion xxxx ... }
    .div2{ declaracion yyyy ... }
    .div3{ declaracion zzzz ... }
}

.menu2 {
     declaracion menu2 ...
    .div1{ declaracion vvvv ... }
    .div3{ declaracion wwww ... }
}