Isolating html elements on one page from ALL inherited general CSS of site??

[carlosbcg]

Using a class or ID for the one page's html elements doesn't work!

That's because higher level CSS defines general selector properties for ALL input fields (for example).

I can make a form on the one page use a specific class or ID to try and isolate it's elements and to let me define new CSS for it but the higher level generic selector properties applicable to ALL input fields on any page still apply!

I can sit here and spend all kinds of time redoing the CSS entirely to isolate the one page every time I encounter this but is there not a faster and better way to completely isolate a group of html elements from being affected by ANY higher level CSS anywhere on a site?

For example let's say I have the following in a higher level CSS file.

input {
color: blue;
border: 2px;
}

Then in the one page I create a unique class and CSS code like so...

.page input {
color: purple;
}

The color property would work as desired and be isolated but NOT the border which would inherit the value from the higher level generic "input".

Yes I can set a new border value inside the .page class but that's a hassle and a half if I have a ton of selectors with properties that affect the input field.

I need some way to completely isolate the page input field from ALL higher level CSS so that I can start fresh to create just the CSS I need for the input field on the one page.

Does anyone have any suggestions?

Carlos

[ralph.m]

You could remove the border declaration from here:

input {
color: blue;
border: 2px;
}

... and just add it in where needed.

You could also add different classes to each form as hooks for different styles ... but you have to be careful how you name them.

The color property would work as desired and be isolated but NOT the border which would inherit the value from the higher level generic "input".

If you are going to set a different text color, it's no biggie to set a different border color too. I'm not really convinced there is a problem here.

[Paul O'B]

Hi,

Unfortunately there is not a mechanism for isolating elements from the cascade because the C in CSS stands for Cascade and that's how it works (although I do believe there was talk about creating islands in the page a bit like iframes)

As Ralph said its not usually a problem because you just over-ride the rule you don't need however in the case of form elements you can't actually go back to the default.

The main problem is that you should not set global rules in the first place apart from more general settings. Only apply borders and backgrounds to the inputs that need it and not to all inputs and then try to cancel it out. Global rules are meant to hit everything so be careful with them and apply them wisely.

[carlosbcg]

You could remove the border declaration from here:

input {
color: blue;
border: 2px;
}

... and just add it in where needed.

Thanks for the suggestion Ralph but my example was simply to illustrate the problem. To deal with the problem using my example is trivial and easily done. But when you have hundreds and hundreds of lines of CSS in prior files and are adding a new form to an existing site and inserting it in it becomes a bear to try and isolate the new CSS for the new form from any in previous CSS that might affect it.

What I am doing is adding a WordPress blog to a non-WordPress site and changing the comment form that normally comes with that standard WordPress theme to look exactly like the contact and other forms that are found on the existing site.

It doesn't seem like there is any way around this problem other than going through the hassle of dealing with one CSS selector and it's properties one at a time and explicitly setting new CSS settings for it in the new CSS to override existing stuff. Which is a real pain though helped a lot of course using Firebug and Chrome developer tools to allow me to see which one's affect the new form.

Carlos

[carlosbcg]

The main problem is that you should not set global rules in the first place apart from more general settings. Only apply borders and backgrounds to the inputs that need it and not to all inputs and then try to cancel it out. Global rules are meant to hit everything so be careful with them and apply them wisely.

Yeah...unfortunately I won't be the one creating the old CSS of the sites I add WordPress blogs to. So I will inevitably bump into general CSS statements that were created to apply to all elements like all inputs, textareas, labels and so forth.

I can isolate new CSS I create by encapsulating in a class or ID of my making for the new form I create but that doesn't override generic CSS as described from previous CSS files.

Which is my problem.

I thought there might be some hack or trick to this but it doesn't look like there is.

Carlos

[Paul O'B]

No, there is no easy way to isolate content because CSS is built around the cascade - that's its strength but can be a drawback if you want to drop isolated elements into a page. It is a matter of over-riding what went before I'm afraid. Firebug is useful here but badly built sites (or CMS systems) do make it more awkward than it should be.

[dresden_phoenix]

As Paul pointed out C is for cookie and that's good enough for me! Wait no I mean C is for cascading. This is another case of not thinking right. I mean you may know of all the commands but you have to think WHY they are used.


The cascade in CSS defines a hierarchy, building ever increasing levels of specificity. So when Writing your code you have to take this into account and assign attributes from the more general to the more specific ( every once and a while you have to reset back , but that's another thing all together and still falls perfectly within the paradigm )

if only one element has a GREEN bg.. it is illogical to do P{ background:green} and then use classes an IDs set the display to the way it should GENERALLY look.


What you seem to be up against is a resenting a reset. You need to change the reset of the WP file to suit you needs, using the principle above and then add the attributes. needed.

IF you don't cant get access to the reset file in WP CSS ( unless you are doing some evil cross domain linking , in which case SHAME ON YOU!!!!) You can always build a general reset of your own, as later rules override rules of equal specificity.


For example :
<link to WP CSS>
<link to your reset> as neeeded
<link to your specific CSS>

( do note that it has to be your general rules ALWAYS , or WP general rules ALWAYS.. (thus the term:rule) you cant have it BOTH ways... it's not even fair to ask)

Hope that helps

[ralph.m]

It doesn't seem like there is any way around this problem other than going through the hassle of dealing with one CSS selector and it's properties one at a time and explicitly setting new CSS settings for it in the new CSS to override existing stuff.

It's easier to do this looking forwards than backwards, but to avoid this problem, I often give an element like a form a class, and add that class to all styles for that form. E.g.

<form class="general">

.general input { ... }
.general textarea { ... }

That way, and form that is to share those styles just gets a class of .general. Any form that will have different styles starts with a blank slate ... no overrides needed.