help: get rid of global class

[delickate]

Hi,

I'm using some global CSS class for input. but now i want that this class should not apply on some specific input. i use some inline class for it but class still inherits. even i put 'important'. is there any other way on php, jquery, js to remove any global class. there should not apply any class for specific input.

 

Please help

Thanks

[cpd]

You can try redefining the specific inputs by addressing their wrapper and then the input it-self.

 

input {font-size: 12px;}
div#wrapper input {font-size: 16px;}

<div id="wrapper">
    <input name="myName" />
</div>

 

The second line of CSS should take higher precedence over the first - from what I can remember anyway.

[AyKay47]

can you provide the relevant code please?

The correct way to do this would be to modify the CSS.

[seanlim]

In jQuery, you can simply use the removeClass('globalClass') method.

 

Ideally (as you mentioned), you would modify only the CSS in the spirit of separating presentation from the markup. However, there will be trade-offs if you are adamant about sticking to this rule and don't want to go down the "#wrapper"-path mentioned by CPD.

 

There are a host of selectors available http://www.w3.org/TR/CSS2/selector.html to define styles only for specific elements and even the "not" selector which you could use to prevent the new class from being styled. However, this might result in long and hard to maintain CSS code.

 

I usually go somewhere in the middle, not overdoing the "unneeded" HTML elements but putting them in when they make sense. This should help prevent overly verbose CSS.

 

Edit: the "not" selector is only available in CSS3

[cpd]

You wouldn't be able to remove the class like that with jQuery because its not a class. Its a style for the tag itself.