Como especificar a ordem das classes CSS?

113

Estou um pouco confuso sobre CSS e o classatributo. Sempre pensei que a ordem em que especifico várias classes no valor do atributo tem um significado. A última classe pode / deve sobrescrever as definições da anterior, mas isso não parece funcionar. Aqui está um exemplo:

<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>

Eu esperaria que o terceiro exemplo com class="basic extra"deveria ter uma borda azul, uma vez que a borda especificada extra sobrescreveria a borda do básico.

Estou usando FF 3 no ubuntu 9.04

html css

— Tim Büthe
fonte

246

A ordem em que os atributos são substituídos não é determinada pela ordem em que as classes são definidas no classatributo, mas sim onde aparecem no CSS.

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

Expandir trecho

O texto no divaparecerá green, e não red; porque .myClass2está mais abaixo na definição de CSS do que .myClass1. Se eu trocasse a ordem dos nomes das classes no classatributo, nada mudaria.

— Zoidberg
fonte

14

Não consigo entender por que eles implementariam dessa forma. Curiosamente, essa também é minha opinião para a maioria das outras coisas que o CSS pode fazer.

— byxor

@ porque porque as regras estão em cascata . eles se aplicam de cima para baixo, da esquerda para a direita. faz sentido para mim

— O-9

27

A ordem das classes no atributo é irrelevante. Todas as classes no classatributo são aplicadas igualmente ao elemento.

A questão é: em que ordem as regras de estilo aparecem em seu arquivo .css. No seu exemplo, .basicvem depois .extrapara que as .basicregras tenham precedência sempre que possível.

Se você quiser fornecer uma terceira possibilidade (por exemplo, que é, .basicmas as .extraregras ainda devem se aplicar), você precisará inventar outra classe, .basic-extratalvez, que explicitamente forneça isso.

— VoteyDisciple
fonte

4

Isso pode ser feito, mas você precisa ser um pouco criativo com seus seletores. Usando seletores de atributo, você pode especificar coisas como "começa com", "termina com", "contém", etc. Veja o exemplo abaixo usando a mesma marcação, mas com seletores de atributo.

[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"/>

Expandir trecho

— TravisV
fonte