Applying CSS styles only to specific elements

Question

I have an existing website with a lot of old pages and forms laid out by tables, which I am trying to gradually switch to CSS. I want to use Twitter Bootstrap stylesheets, especially styles for forms, but only on sections of the pages where I explicitly requested them. For example, I could surround the entire form in a div like this:

<div class="bootstrap"> <!-- everything in here should have the Bootstrap CSS applied --> <form> <p><label for="text_input">Label</label><input type="text" id="text_input" /></p> </form> </div> 

I want all the other forms to remain the same as they are now, because I cannot change them all at the same time. Is there an easy way to do this? I could go through each style in Bootstrap CSS and add a parent selector (for example, “p” will become “div.bootstrap p”), but it would take a lot of time and it would be easy to skip styles.

Edit: if such a thing is not possible, is there a free tool that can extract all styles from a file, add a prefix and then save it again?

Answer 1

The last fix was to use SASS (recommended by someone outside the site), as this allows you to insert elements and then automatically produce the final CSS. Step by step process:

• Merge two Bootstrap files ( bootstrap.css and bootstrap-responsive.css ) into bootstrap-all.css .
• Create a new SASS file, bootstrap-all.scss , with the contents of div.bootstrap { .
• Add bootstrap-all.css to bootstrap-all.scss .
• Close the div.bootstrap selector by adding } to bootstrap-all.scss .
• Run SASS on bootstrap-all.scss to create the final CSS file.
• Run the YUI Compressor in the resulting file to create a minimized version.
• Add a minimized version to the head element and wrap everything I want to apply styles to in <div class="bootstrap"></div> .

Answer 2

For Bootstrap 3, this is easier if you use less :

Download the Bootstrap source code and create a style.less file as follows:

 .bootstrap { @import "/path-to-bootstrap-less.less"; @import "/path-to-bootstrap-responsive-less.less"; } 

Finally, you must compile a smaller file; there are many alternatives

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js

Or use npm to install less , then compile the style.less file in style.css :

 npm install -g less lessc style.less style.css 

Answer 3

I came up with a CSS solution if you cannot use LESS / SASS due to work / other reasons.

• I used this site http://www.css-prefix.com/ and copied / pasted bootstrap.min.css there. I set the prefix = '. Bootstrap 'and spacer =' '. It will prefix everything with .bootstrap, except not perfect.
• If you do grep for '.bootstrap @media', you will find that the first class to the right of the opening bracket does not have .bootstrap as the parent. Add .bootstrap to all these meetings, about 68 for me.
• Then replace all .bootstrap @media with @media.
• The final step is to replace all ".bootstrap @" with "@" (there should be about 5 occurrences).

Example:

 .bootstrap @media (min-width:768px){.lead{font-size:21px}} 

must be replaced by

 @media (min-width:768px){.bootstrap .lead{font-size:21px}} 

Kind of brute force method, so first try the LESS / SASS method.

 <div> No Bootstrap </div> <div class="bootstrap"> Yes Bootstrap </div> 

Answer 4

I was not satisfied with any of these answers. Using Less to cover the rules created all kinds of defects. Clearfix, for example, has been corrupted. And rules like button.close became button.bootstrap close instead of what I really wanted: .bootstrap button.close .

I used a different approach. I use PostCSS to handle the finished CSS that comes with Bootstrap. I use the Scopify plugin to span each rule with .bootstrap .

This is mostly happening. Of course, there are html and body rules that become .bootstrap html and .bootstrap body that become insensitive. Don't worry ... I can just write a PostCSS transformation to clear them:

 var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) { return function(css, result) { css.walkRules(function(rule) { rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap'); rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap'); }); } }); 

Now I can highlight all Bootstrap styles by adding class="bootstrap" at the top level.

Answer 5

It's hard. You cannot apply different CSS styles to different parts of the same web page .

I suspect that the only way to do this is to create a separate file for your content to take bootstrap styles, and i-frame it onto the page as follows:

 <iframe src="/content-to-take-bootstrap-styles.html" ></iframe> 

then in content-to-take-bootstrap-styles.html to the download style sheet in the header. But then you have all the difficulties of an iframe - for example: an iframe element will not grow to fit the length of your content.

Answer 6

I have a simple solution.

• Copy the contents of the css bootstrap to this ( http://css2sass.herokuapp.com/ ) in the online css converter scss / sass.

  / li>

• Add tag information (e.g. div.bootstrap{ ) to the top of the scss content and close the tag at the end.

• Copy all scss text to this scss to css converter ( https://www.sassmeister.com/ ) and convert it :)