'Parent selector on external css broken

The below code works but when I have the same code in an external stylesheet it will not style the box. Just wondering why or how I can fix it?

    <!DOCTYPE html>
<html>
<head>
    <link rel="style" href="style.css">
    <meta charset="UTF-8">
    <title>Document</title>
     
   <style>#boxes .box{
        height: 20px;
        border: 2px solid red;
        background-color: red;
    } 
    </style>

</head>
<body>
    <div id="boxes">
        <div class="box">Box</div>
    </div>
</body>
</html>

Heres is the code in the external CSS

#boxes .box{
    height: 20px;
    border: 2px solid red;
    background-color: red;
}
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions