css code in code writing code in css code

Question

How do I nest codes in css?

Working Code (Example):

.component--search{
  background: #3D3F43;
  border-radius: 15px;
  padding: 40px 45px;
  box-shadow: 0 15px 25px -20px #202125;

  .form {
    position: relative;
    margin-bottom: 30px;

    .search-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 53px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 }
}

Code Not Working:

.front{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            .box1{
                background: red;
                border: 1px solid #000;
            }

        }

What's the difference? Why doesn't the part I wrote 2 work? my english is very little. Sorry if I didn't explain the question in detail.

This is not pure css, are you trying to use LESS or something similar? — Esko
– Esko, Commented Sep 19, 2022 at 6:09

IceMaur · Accepted Answer · 2022-09-19 06:12:59Z

2

The second code block works in sass or less but not in css.

So in css you must do this:

.front {
    width: 600px;
    height: 600px;
    border: 1px solid #000;
}

.front .box1 {
    background: red;
    border: 1px solid #000;
}

answered Sep 19, 2022 at 6:12

IceMaur

1151 silver badge11 bronze badges

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

1 Comment

connexo Over a year ago

Native CSS nesting is coming. w3.org/TR/css-nesting-1

Collectives™ on Stack Overflow

css code in code writing code in css code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related