CODEWITHSUNDEEP
htmlcssstandards
kkamil4sz
kkamil4sz

Reputation: 531

Is it ok to override CSS property of class in the same stylesheet?

Just a simple question: Is something like this ok ?

for example:

#formbox textarea,
#formbox input,
#formbox select {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #CCCCCC;
    margin-bottom: 25px;
    width: 220px;
}

#formbox select {
    width: 232px;
}

#formbox textarea {
    width: 300px;
    margin-bottom: 0;
}

I assigned width and margin-bottom property for select and textarea twice, is it ok, or should i just separate #formbox textarea, #formbox input, #formbox select and copy&paste properties that are the same for them ?

Upvotes: 1

Views: 65

Answers (1)

user2864740
user2864740

Reputation: 61875

In CSS declaration blocks with the same selector the last definition of a property is the only one applied.

The first width: 220px is 'useless' for a select/textarea (as it is overwritten by the same selectors below) - but it applies to input.

Choosing the approach shown, instead of a separate input { width: .. } is perfectly OK, coming down to preference.

(In the rules engine itself, it doesn't matter after the CSS is loaded.)

Upvotes: 2

Related Questions