CSS Nested Comments

Question

Is there any way to nest comments in CSS?

For example, when I try to comment out the following two statements, the outer comment ends when it encounters the */ in th

Answer 1

CSS can't handle nested comments.

Using a CSS preprocessor like LESS or SASS, you can comment "silently" using

// this syntax

These won't show up in your final CSS.

Answer 2

Nested comments is not supported by CSS. You can't do that because you don't know how browsers will read it.

You can use LESS (an extension to CSS) that allows the one line comment //

Answer 3

Well, yes, the same "workaround" you linked for HTML comments would work here. Change inner */ to * / (with a space). There's really no way of nesting block comments.

Answer 4

A couple years late to the party, but I seem to have stumbled on a way that seems to allow a kind of nested comment...although, as an admitted NON expert, there may be issues.

It appears, if you just place an extra, undecorated set of braces around some css, the css inside, and even any uncommented text, is not recognized, at least by Chrome 58.0.3029.110 (64-bit):

Original (from an unrelated question and answer):

html, body, .container {
    height: 100%;
}
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

Fiddle

With the brackets:

html, body, .container {
    height: 100%;
}
{ extra braces...
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}
/* ...act as comment? */ }

Fiddle

Kind of handy for dev work. The way I'm using this right now:

<style>

/* Use this */
    .class1 {
        /* stuff */
    }

{ /* But not this */
    .class1 {
        /* other stuff */
    }
}

</style>

Answer 5

CSS does not have a nestable comment syntax.

You could instead wrap the rules in something which does nest, but will not match anything, such as a non-existent media type:

@media DISABLED {
    #container {
        width: 90%;     /* nested comment here */
        margin: 0 auto;
    }

    #container .class {
        width: 25%;
    }
}

This does have the caveat that it will not be obviously a comment (so it will not be removed by tools that remove comments), and will cause the browser to spend time on parsing it and finding that it doesn't match. However, neither of these should be a problem for temporary development use, which is the usual reason one would want to comment out a large chunk simply.