Let's take an example. I have a bootstrap.css file and I want it to work only for a particular <div>. The rest of the div's should not be affected. Does anyone has any idea how to do this ?
Or just assume opposite: There is a bootstrap.css file. How can I exclude a specific div from being styled.
I know we use :not(xyz) to remove styling, is their any way for something like this :not(name of file) ? I guess it can be done with javascript.
As you write that you want to do this because of bootstrap (but same problem applies where you have a big file with a lot of styles), you would have to either add additional selector definition to every existing one in the file (if using plain CSS), or you could wrap the whole file in a nested structure which is supported for example in LESS or Saas, like:
#my-unique-div {
... content of bootstrap file here ...
}
You could also rename the bootstrap file to bootstrap.less, which would make this possible, leaving the bootstrap file in original state:
#my-unique-div {
@import "bootstrap.less";
}
Also, use class if expected that additional such div would be needed. Use id if it is really only one div as you wrote, so that you signal the intent better.
Put a unique class on the <div>.
Then put all the styles for this div in that selector definition in css.
For example:
<div class='i-am-unique-sitewide'></div>
and
.i-am-unique-sitewide {
/* styles */
}
It doesn't matter which file this goes in or what else is in that file as long as the file is loaded on the page that it's needed and the class is only ever added to the div you're trying to target (though you are free to add it elsewhere of course).
If you want bootstrap.css work only for a particular <div> then you should assign a id to that <div> like:
<div id="mydiv">
After that inside bootstrap.css write your CSS under following selector only:
#mydiv{
..
..
..
//Your Css for for a particular <div>
..
..
}
div{......//content of selector..} and modify it for the div you want to target like #mydiv{....//content of selector ... ...} .