Can someone help me understand this?

Forum Moderators: not2easy

Message Too Old, No Replies

Can someone help me understand this?

Class parent/child inheritance

Matthew1980

10:25 pm on Nov 19, 2010 (gmt 0)

Hello all,

I have a problem that may not be a problem, could just be me not understanding the issue correctly!

main id set up to handle input element
#MainContent input{
somestuff: somevalue;
}

Seperate class to handle submit button 'uniquely' - this is in the same div as #MainContent
.SubmitInput{
somestuff: somevalue;
}

What I want to know is, rather than directly putting the styling into the element to override inheritance, is there a directive for the class to 'ignore' the normal parent/child inheritance?

Thanks for any insight into my misunderstanding of this issue.

Cheers,
MRb

birdbrain

12:10 am on Nov 20, 2010 (gmt 0)

Hi there Matthew1980,

modern browsers will render this...

input[type=text]

...but, of course, it will not work in IE6. :(

Here is a a basic example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>untitled document</title> 
 
<style type="text/css"> 
#mainContent input[type=text] { 
 width:300px; 
 border:2px inset #f00; 
 } 
.submitInput { 
 font-weight:bold; 
 } 
</style> 
 
</head> 
<body> 
 
<form action="#"> 
<div id="mainContent"> 
 <input type="text"> 
 <input class="submitInput" type="submit"> 
</div> 
</form> 
 
</body> 
</html>

birdbrain

alt131

8:38 pm on Nov 20, 2010 (gmt 0)

What I want to know is, rather than directly putting the styling into the element to override inheritance, is there a directive for the class to 'ignore' the normal parent/child inheritance?

Not so much a directive to "ignore" the parent/child selector, but increase the specificity of the selector to "over-ride" the parent/child rule.

As birdbrain says, attribute selectors [w3.org] will do it, but older browsers do not understand them.
If you need to support older user agents, an option is to use the <button> element [w3.org]. It is understood, can be styled, and will not be affected by the styles you have specified for <input>.

Matthew1980

10:25 pm on Nov 21, 2010 (gmt 0)

Hi all,

Thanks for the advice, I shall have a play and see what I can work out. I shall post an update if I find anything useful that can/could benefit others..

Cheers,
MRb

milosevic

9:38 am on Nov 22, 2010 (gmt 0)

Good question Matthew1980!

With some rules such as width and height you can use auto, but many rules I don't believe there's a way to reset to default behaviour - the only option as others have said is to make a selector with higher specificity than the original (or the same but coming later in the source code) and overwrite the styles with this.

It would be good if there was a :reset option for certain cases, like if a top or left value has been specified for an absolutely positioned item and that needs to overridden to not having position declared for a particular sibling element while still keeping position:absolute.