There is any way to simplify this code? I want to change the color to the child labels with the class "container-quill"

 <style>
        .container-quill p {
          color: black !important;
        }
    
        .container-quill h1 {
          color: black !important;
        }
    
      </style>
    
    <div id="editor" >
      <p></p>
      <h1><h1/>
     </div>

CodePudding user response：

Here you go with :is(...selectors):

.container-quill :is(p, h1) { 
  color: black !important; 
}

which is the modern version of

.container-quill p,
.container-quill h1 { 
  color: black !important; 
}

Depending on your specificity needs you can also consider :where(...selectors), which doesn't add anything to the specificity of the full selector it's used in, but in your case doesn't make much sense since you are applying your rules no-matter-what by stating !important anyway:

.container-quill :where(p, h1) { 
  color: black !important; 
}

Browser support:

• :is()
• :where()