How to specify the order of CSS classes?

user_60518 0
Viewed 53226

I'm a little confused about CSS and the class attribute. I always thought, the order in which I specify multiple classes in the attribute value has a meaning. The later class could/should overwrite definitions of the previous, but this doesn't seem to work. Here's an example:

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

I would expect, the third example with class="basic extra" should have a blue border, since the in extra specified border would overwrite the border from basic.

I'm using FF 3 on ubuntu 9.04

css html
3 Answers

This can be done, but you have to get a little creative with your selectors. Using attribute selectors, you can specify things like "begins with", "ends with", "contains", etc. See example below using your same markup, but with attribute selectors.

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}
<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>

user_50905180
Related