How to redirect Css to only one Div

Asked

Viewed 1,152 times

4

I’m creating a website where I need to use a unique css file for the div responsible to display the services performed on it. The problem is that this css file is downloaded from somewhere else, and it ends up changing the rest of the page. Does anyone know how to proceed in this case?

css html5

  • Any chance you could take what’s important from these CSS and put it on your targeting div site? I don’t recommend pulling external Csss that aren’t objective.

  • Div has a specific id or class?

  • We’re already doing it, but there’s no easier and simpler way to do it than by erasing and testing?

2 answers

1

Copy the Code

In my opinion, the best way would be to actually extract what would be important from the code for you and then paste it into your code by adapting whatever is needed for your div. But there are two other ways to do this:

Iframe

There is the possibility of you creating a new page, say: div.html and customize with the code from outside as if it were a new page and then simply pull it to your div, because then the page CSS will affect only what is inside the div and vice versa. I’d just put it like that on your div:

<div>
    <iframe src="div.html"></iframe>
</div>

Style Scoped

This is not exactly an ideal way, as your support today is limited only to the Firefox, but I think it deserves a mention. There is this way where you write a new style where you want it on your page and it applies only in that region with the Scoped. This way you could also import this CSS. Example:

<div>
  <style scoped>
    h1 { color: red;   }
    p  { color: brown; }
  </style>
  <h1>Esse é um H1 afetado pelo scoped. Independente do estilo da página, ele será vermelho.</h1>
  <p>Esse é um parágrafo na scoped div. O texto será marrom.</p>
</div>

<p>Esse parágrafo não será afetado e será preto.</p>

You could use it this way in your case:

<div>
    <style scoped>
        @import "externo.css";
    </style>
</div>

Sources:

0

add a class in div, example

<div class="nomedaclasse">

then in a css or tag style, copy the code from the css file that you will take from somewhere else, instead of using the entire file. example:

<style>
.nomedaclasse{ background-color: #fff; } /* substitua o background-color pelo atributo desejado*/
</style>

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.