Is it possible to ignore all CSS files except for one for a certain element?

HTML & CSS
1

Hi,

Let’s say I have a page with a style file (style.css). On that page I have a div. I have another style file (div.css) and I want the div to be affected only by that style file. Is this possible?

Why I need this? I built a web tool to be inserted into a WordPress page. The WordPress page has its own theme styles, and my tool has its own styles. The theme’s styles are affecting my tools styles (table, input, button, etc.) and I am having to go through most elements and fix their styles. I was wondering if there is a simpler way.

Thanks for any ideas.

2

The usual method would be to add a class or ID to your tool, so that you can target more specific styles to that section and have them over-ride the default.

3

If your custom css file is linked to after the theme css file, the custom one should override the first one.

Eg, if style.css id:-

div { background: red; }
p { color: white; }

and div.css is:-

div { background: blue; }

Then on the page:-

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="div.css">

Then <div>s will be blue, but <p>s will still be white, because div.css is last.

1 Like
4

Yes, I am doing that. To clarify, I’m not asking how to style an element specifically, I’m asking how to ignore all other style files except one for a certain element. The issue is for elements like table, input, button, form etc. the WordPress theme style has lots of resetting for many CSS properties I don’t even use on my tool’s elements. Therefore, I am having to go through each element and override those styles, which is really not the ideal way.

In terms of programmatically speaking, I want to do the following:

if (div) {
  ignore style.css
  use div.css
  without needing to redeclare all styles
}
5

Hi,

The C in CSS stands for ‘cascading’ which means that styles can cascade from multiple sources in order to style the document.

Presently there is no cross browser way to isolate code so that it is unaffected by cascading rules although you can do some things using all:initial (not supported in IE):

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{font-size:2rem}
div {
	background:red
}
button {
	background:red;
	color:#fff;
}
p {
	background:green
}
#mydiv, #mydiv * {
	all:initial;
}
</style>
</head>

<body>
<div>
  <p>Testing a
    <button>Button</button>
    <label for="Test"></label>
    <textarea name="Test" id="Test" cols="45" rows="5">textarea</textarea>
  </p>
</div>

<div id="mydiv">
  <p>Testing a
    <button>Button</button>
    <label for="Test"></label>
    <textarea name="Test2" id="Test2" cols="45" rows="5">textarea</textarea>
  </p>
</div>
</body>
</html>

Note that you also lose the UA’s styling to the button and textarea so you would need to style everything yourself specifically. Of course specificity still comes into play and rules with more weight or !important will still over-ride the all:initial setting unless you increase the specificity of that rule also or add !important (which will make it awkward). In the end its still a guessing game.

1 Like
6

I’m not aware of any way to do exactly this through css. But I’m sure css can produce the result you want, via the methods mentioned. To single out a specific element, maybe giving it an id would work, being unique and a very “weighty” selector to override the previous styles.

1 Like
7

[quote=“PaulOB, post:5, topic:243373, full:true”]
you can do some things using all:initial[/quote]

Thank you very much! It looks it is close to the kind of thing I am looking for. I will check it and see how I can use it in my case.

8

It’s about the best you can do for now but IE has no support unfortunately so you should still style your widget explicitly and set all the properties that may be changed by something else just in case.

When browser support for revert arrives it will be much easier.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.