css code in code writing code in css code

Elvin Sumgait 0
Viewed 37

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.

css html
1 Answers

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