Why would CSS flex-shrink not work from a CSS file, but works fine inline?

Question

<div class="container-1">
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div id="7">7</div>
</div>

.container-1 > div{
  height:100px;
  width:100px;
  background-color:rgb(50,50,50);
  margin:10px;
  justify-content:center;
  display:flex;
  align-items:center;
  color:white;
  font-size:35px;
  
}

#7{
  flex-shrink:4;
}

In this code I tried using the #7{flex-shrink:5;}. But it didn't work. Then I use inline CSS code for the 7th div child. Then it worked. Please explain to me why it didn't worked.

Answer 1

If you want to use an ID as a number in CSS, it should be escaped. In your case - #\37 {flex-shrink: 4;}. Btw, it's better to use class names for styling and avoid starting them with numbers to prevent the escaping problem