CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vinay Mahadasa
Vinay Mahadasa

Reputation: 41

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

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 ??

Upvotes: 4

Views: 3302

Answers (5)

Christian Esperar
Christian Esperar

Reputation: 528

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.

Upvotes: 2

dokgu
dokgu

Reputation: 6040

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.

Upvotes: 0

vlk
vlk

Reputation: 1454

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>

Upvotes: 0

user7710952
user7710952

Reputation:

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!

Upvotes: 0

Kyle Richardson
Kyle Richardson

Reputation: 5645

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.

Upvotes: 0

Related Questions