Unwanted inheritance

HTML & CSS
1

Hello everyone,

It seems I do not understand something about inheritance which has caused problems in my design.

I have a series of styles defined for a specific form class “SearchForm”, but every other form in my application inherits some properties from it (even forms with no class or other classes).

These are the css definitions related to SearchForm:

/*----- SearchForm Styles -----*/
.SearchForm .rowElem {
    height:35px;
    width:100%;
    clear:both;
}
.SearchForm input, select, textarea,input[type=text],input[type=password], input[type=email] {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    vertical-align:middle;
    font-weight:normal;
    color:#444444;
    margin:-3px 0;
    padding:0;
    float:left;
    line-height:20px;
    background:#fff;
    border:1px solid #a3a3a3;
    padding:2px 3px;
}
.SearchForm fieldset {
    border:0;
}
.SearchForm label {
    color:#222222;
    font-weight:bold;
    float:left;
    font-size:.857em;
    line-height:19px;
}

.SearchForm input[type=submit], input[type=reset] {
    border:none;
    background-color:#d41e33;
    outline:none;
    font-size:.786em;
    color:#fff;
    height:29px;
    width:87px;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    cursor:pointer;
    float:right;
}
.SearchForm input[type=submit]:hover, input[type=reset]:hover {
    background-color:#000;
}
.SearchForm input[type=checkbox] {
    width:13px;
    height:13px;
    padding:0;
    outline:none;
}
.SearchForm textarea {
    overflow:auto;
}

Could someone please tell me why every form is inheriting from this class?

Regards

2

The problem is that you can’t write your selectors like this:

.SearchForm input, select, textarea,input[type=text],input[type=password], input[type=email]

Rather, it needs to be like this:

.SearchForm input, [COLOR="Red"].SearchForm[/COLOR] select, [COLOR="Red"].SearchForm[/COLOR]  textarea, [COLOR="Red"].SearchForm[/COLOR] input[type=text], [COLOR="Red"].SearchForm[/COLOR] input[type=password], .SearchForm input[type=email]

Nothing is carried over across commas, so all those without the .SearForm class were targeting every input, label etc. on the site. :slight_smile:

3

Ooooh, thanks :slight_smile: I deserved to be laughed at :slight_smile:

4

:lol:

Only kidding. :wink:

5

If you are concerned about Ie6 (or as a general matter of interest) then attribute selectors and pseudo elements should be listed separately and not like this.


textarea,[COLOR=Red][/COLOR] input[type=text]{etc....}

In the above IE6 doesn’t understand the attribute selector and the rules state that if a browser doesn’t understand one of the comma separated values then the whole rule should be dropped and IE6 would not get the input styled at all.

Of course IE6 is probably not being supported anyway but the same holds true for css3 advanced pseudo element selectors and chaining then together is risky because if a browser doesn’t understand one of them then the whole rule is dropped.