1

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>
lesteruwu
  • 11
  • 1
  • 1
    What do you mean by "specific stylesheet for a div"? Do you want to apply a specific style to that div? A stylesheet is all your CSS rules for a **document**, not a **div**. – Bruno Monteiro Feb 12 '20 at 00:14
  • use **scoped** attribute in html, https://www.w3schools.com/tags/att_scoped.asp – Abdelrahman Gobarah Feb 12 '20 at 03:41
  • Possible duplicate of https://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element – Rajeev Feb 12 '20 at 08:44
  • Does this answer your question? [Limit scope of external css to only a specific element?](https://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element) – Rajeev Feb 12 '20 at 08:45

2 Answers2

3

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>
obscure
  • 11,916
  • 2
  • 17
  • 36
1

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;
}