Restrict CSS from external stylesheet not to apply for a widget inside div

4
votes

I have a html file which loads with two css files as follows,

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body class="theme-css">

<div id="mywidget">
<label>Textbox</label>  
<input type="text" value="name" />
</div>

</body>
</html>

And the styles inside two style files is,

style1.css

.theme-css input[type="text"] {
    color: red;
}

style2.css

#mywidget input[type="text"] {
    width : 100%;
}

Both style1 and style2 apply styles to input text box but on different css attributes. So, when i load the page, the input text box in my widget gets red color from the theme-css style in style1.css and it gets 100% width from the mywidget style in style2.css.

My requirement is that , can we restrict the styles being applied inside the mywidget div with only styles from one css file. (i.e) From the above example , i do not want red color on text box being applied from style1.css, i only want the 100% width from style2.css. Can the styles be restricted inside a div to be loaded only from a particular stylesheet ?

I know this can be achieved by overriding the color attribute for input type text box in style2.css as follows,

#mywidget input[type="text"] {
    color: initial;
    width : 100%;
}

The above overriding might not help as the widget can be loaded in different websites. And different websites have different themes with different styles. So, the overridden css of one site may not hold good for another website. This does not help in CSS scaling and maintaining a single css file for multiple websites with different themes.

Could this be done in any other way, such that i need not override the css for every element , which has styles in parent css ?

We went for a JavaScript widget approach to avoid using iframe.

I have found cleanslate.css, which was mentioned will solve css issues for js widgets. But the problem is I need to add ! important for all my styles. Is this the correct approach. Any suggestions ??

5
javascriptjqueryhtmlcss
Do you not have access to the main stylesheet? If you don't, how exactly do you plan to maintain this behavior across multiple sites? – Waxi
Can your HTML and CSS still be modified? – Patrick Gregorio
@Waxi No i do not have access to main stylesheet. Maintaining the behaviour across multiple sites is the main issue – Vinay Mahadasa

5 Answers

2
votes

You cannot stop CSS inheritance, but if you really need to do this, maybe try with iframe since it is self-contained. I believe that is what other social media giant use on their website.

0
votes

It is not possible to exclude a stylesheet from affecting certain elements. You can add more specific styles for your widget though if you want to set default styles for it.

#mywidget > input[type="text"] {
    width: 100%;
    color: desired_default_color
}

Then if a user of your widget doesn't like the default color, they can simply override it by adding a style lower in the cascade. Such as:

#mywidget > input[type="text"] {
    width: 100%;
    color: desired_default_color
}

#mywidget > input[type="text"] {
    color: override_color
}

Override color will be applied.

0
votes

With this:

   #mywidget input[type="text"] {
        color: initial !important;
        width : 100% !important;
    }

You cant override the file but you can override everyother rule.

*important isn't the best practice in css but the best solution i can think of.

Cheers!

0
votes

You can't do it, isn't possible to use different stylesheet on different page parts, and I can't understand why you need to do this. Use class:

#mywidget.one input[type="text"]  {
    width : 100%;
    color: red
}

#mywidget.two  input[type="text"] {
    width : 100%;
    color: blue
}
<div id="mywidget" class="one">
<label>Textbox</label>  
<input type="text" value="name" />
</div>

<div id="mywidget" class="two">
<label>Textbox</label>  
<input type="text" value="name" />
</div>
0
votes

If you can modify your CSS and HTML you can make it work by checking for 2 classes before applying the color: red style.

To illustrate please check the snippet below:

.theme-css input[type="text"].red {
  color: red;
}

.mywidget input[type="text"] {
  width: 100%;
}
<div class="theme-css">
  <div class="mywidget">
    <label>Textbox</label>
    <input type="text" value="name" />
  </div>
  <div class="mywidget">
    <label>Textbox</label>
    <input type="text" value="address" class="red" />
  </div>
</div>

Additional Explanation:

.some-class .red - this selector means apply the style to an element with a class red that is a child of an element with a class some-class.

.some-class.red - (notice the lack of space) this selector means apply the style to an element that has both some-class and red classes.