If you want to style child elements of a <div> e.g. a <h1> heading independent of other possible <h1> elements outside of the container you can do this with a single CSS file only.

CSS offers the powerful > selector which let’s you set up a rule for a child element.

In your case the container <div> has an id of superdiv which is accessible like:

#superdiv
{
}

To access a child element – in your case the <h1> tag – just do:

#superdiv > h1
{

}

Here’s an example:

h1 {
  color: #00ff00;
}

#superdiv {
  background-color: #efefef;
  border: 1px solid #ff0000;
}

#superdiv>h1 {
  color: #0000ff;
}

<h1>Hello</h1>
<div id="superdiv">
  My content
  <h1>Hello</h1>
</div>

you do not create a specific stylesheet inside the div
try this method

<div id="style-sheet-modern"> 
   <div class="my-class"></div>
   <div class="etc"></div>
</div>

#style-sheet-superdiv .my-class{
    color:black;
} 

#style-sheet-modern .etc {
   color:red;
}

I’m trying to apply an specific stylesheet for a div, i don’t want to use an iframe for this, ive tried this:

<div id="superdiv">

  <style>
    #superdiv {
      @import url("./css/style.css");
    }
  </style>


//html that apply css here from stylesheet linked before
<h1 class="x"> Hello</h1>

</div>