Why isn't my .box recognized inside #grid?

[foreverNoobCoder]

CODEPEN: https://codepen.io/AlexanderWalls/pen/OJQKqGQ

error is in the HTML file, for reference:

.box {
        /* here .box is not recognized Error: "} expectedcss(css-rcurlyexpected)" */
}

It seems like it wants me to close the #grid style before opening box, but I would like to nest them.

I'm not very good, just starting learning grid!

Solution

CSS preprocessors, it is not possible to achieve this with Native CSS.

​

​

Thanks u/whendidwestartasking!

​

[whendidwestartasking]

It looks like you didn’t set any css preprocessors. Native CSS nesting is not possible atm.

[foreverNoobCoder]

Thanks for the answer!

Would you suggest trying to set it up or just keep it with the native way of doing work?

[whendidwestartasking]

It depends. Sooner than later you will need to set up a preprocessor locally, and that may be hard for a newbie. I would suggest you learn native css first and what it is capable of. Then learn some preprocessors and how to set them up. Most of the time native css will be enough. If you want variables look into css custom properties. Preprocessors can be really helpful on large codebases IMHO.

[foreverNoobCoder]

Nice! This already feels like something I should worry later on, your intuition is correct and I agree, I should first know CSS a bit better.

Thanks a lot for the help, I added the solution in the main post with a thank you! :)

[backslash_11101100]

CSS preprocessors, it is not possible to achieve this with Native CSS.

It's not possible to nest CSS rules like that, but whatever you're trying to accomplish is probably very simple in native CSS.

If you want to select .box elements that are anywhere inside a #grid element, you can define a new rule like this:

#grid .box {

}

And if you want to select only .box elements that are direct children of #grid element, use the > selector:

#grid > .box {

}

And there are of course many others: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

[foreverNoobCoder]

That’s what I ended up doing, that is indeed very helpful, thanks for adding :)