How to style multiple classes differently under one parent id in a stylesheet-CodePudding

I want to style multiple classes differently under a same id, but dont want to mention the id everytime I style a class in it. I want to use something like the code below

#fold-6 {    
    .headlg {
    font-family: 'Noto Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 47px !important;
    line-height: 55px !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
    }


    .paralg {
        font-family: 'Noto Sans', sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        line-height: 35px !important;
        letter-spacing: 0.02em !important;
        color: #000000 !important;
    }
}

Instead of repeating the id again, like this

#fold-6 .headlg {
        font-family: 'Noto Sans', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 47px !important;
        line-height: 55px !important;
        letter-spacing: -0.5px !important;
        color: #000000 !important;
        }
        

#fold-6 .paralg {
            font-family: 'Noto Sans', sans-serif !important;
            font-style: normal !important;
            font-weight: 400 !important;
            font-size: 18px !important;
            line-height: 35px !important;
            letter-spacing: 0.02em !important;
            color: #000000 !important;
        }
    }

CodePudding user response：

You could use the :is() pseudo-class

 #fold-6 :is(.headlg, .paralg) {}

div :is(p, span) {
  color: red;
}

<div>
  <p>Lorem, ipsum dolor.</p>
  <span>Lorem ipsum dolor sit.</span>
</div>

CodePudding user response：

may be you need SASS for the nested rules, there is the details https://sass-lang.com/guide