Apply css stylesheet to specific div

Question

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>

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
– Bruno Monteiro, Commented Feb 12, 2020 at 0:14
use scoped attribute in html, w3schools.com/tags/att_scoped.asp — Abdelrahman Gobarah
– Abdelrahman Gobarah, Commented Feb 12, 2020 at 3:41
Possible duplicate of stackoverflow.com/questions/17667874/… — Rajeev
– Rajeev, Commented Feb 12, 2020 at 8:44
Does this answer your question? Limit scope of external css to only a specific element? — Rajeev
– Rajeev, Commented Feb 12, 2020 at 8:45

obscure · Accepted Answer · 2020-02-12 00:26:15Z

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>

answered Feb 12, 2020 at 0:26

obscure

13k2 gold badges19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user12876838 · Accepted Answer · 2020-02-12 06:40:42Z

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

answered Feb 12, 2020 at 6:40

user12876838

Collectives™ on Stack Overflow

Apply css stylesheet to specific div

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related