Linking an external stylesheet to only specific HTML elements

Question

Can I link an external stylesheet to only a specific element of an HTML file?

I tried this:

<div id="main">
  <!-- I don't want to style .alert from the external css -->
  <div class="alert alert-success" role="alert">I don't want to style this alert from the external css.</div>
  <div id="preview">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Specific Content Start - I want to style only this element with bootstrap -->
    <h1>Bootstrap 3 - Specific Content</h1>
    <!-- Specific Content End -->
  </div>
 </div>

No, you can't do that. Just write a more specific selector for elements you wish to override. — Scott Marcus, May 17 '17 at 16:56
Is there any trick or plugin or solution with iframe tag, @ScottMarcus? — Tareque Md Hanif, May 17 '17 at 16:58
@techLove No you don't. Please don't advocate `!important` as it is widely known to be a poor technique. You only need to create a more specific selector. It could be an `id` based selector or a selector that is closer to the element. — Scott Marcus, May 17 '17 at 16:58
http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe — Scott Marcus, May 17 '17 at 16:59
Hold on a moment, @ScottMarcus - yes, it is possible, I've done it. — alexanderbird, May 17 '17 at 17:02
@alexanderbird You can't link to a stylesheet and have that stylesheet ignored by all elements but one. All you can do is write a selector in that stylesheet that only one element in the DOM matches. — Scott Marcus, May 17 '17 at 17:07
@ScottMarcus you're right of course, technically, the questions literally as asked has no answer - but I think you can guess what the OP is getting at. "is there a trick or plugin or solution with iframe" sounds a lot to me like "is there *any* way whatsoever to get bootstrap scoped?". There's almost always a way, it's just a question of whether it's worth the effort or not. "No" doesn't seem very helpful to me. — alexanderbird, May 17 '17 at 17:14

score 1 · Accepted Answer · edited May 23 '17 at 12:34

What you can do is compile your own bootstrap from the source .scss files. See this related post: Limit the scope of bootstrap styles (except you don't actually have to fork bootstrap, that's overkill)

You'll end up with all the bootstrap rules prefixed with a certain selector - in your case, #preview ... so an excerpt of your-custom-bootstrap.css might look like this for you:

#preview .alert {
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: $alert-border-width solid transparent;
  @include border-radius($alert-border-radius);
}

In part of your project files you'll have something like the following:

#preview {
  @import (less) 'bootstrap.css';
}

You'll need to go through the process of setting up the build steps, etc. - take a look at http://getbootstrap.com/getting-started/#grunt

Here's someone who's done this and published it, but I'm not seeing any built assets in their repo so it looks like you'd still have to set up the build tools, but at least it works as a bit of a tutorial: https://github.com/homeyer/scoped-twbs

Linking an external stylesheet to only specific HTML elements

1 Answers1