¿Cómo especificar el orden de las clases CSS?

113

Estoy un poco confundido acerca de CSS y el classatributo. Siempre pensé que el orden en el que especifico varias clases en el valor del atributo tiene un significado. La última clase podría / debería sobrescribir las definiciones de la anterior, pero esto no parece funcionar. He aquí un ejemplo:

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

Yo esperaría que el tercer ejemplo con class="basic extra"debería tener un borde azul, ya que el borde especificado adicional sobrescribiría el borde del básico.

Estoy usando FF 3 en ubuntu 9.04

html css

— Tim Büthe
fuente

246

El orden en el que se sobrescriben los atributos no está determinado por el orden en que se definen las clases en el classatributo, sino por dónde aparecen en el CSS.

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

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

Expandir fragmento

divAparecerá el texto en el green, y no red; porque .myClass2está más abajo en la definición de CSS que .myClass1. Si classtuviera que cambiar el orden de los nombres de las clases en el atributo, nada cambiaría.

— Zoidberg
fuente

14

No puedo entender por qué lo implementarían así. Curiosamente, esa también es mi opinión para la mayoría de las otras cosas que CSS puede hacer.

— byxor

@ porque porque las reglas están en cascada . se aplican de arriba a abajo, de izquierda a derecha. tiene sentido para mí

— O-9

27

El orden de las clases en el atributo es irrelevante. Todas las clases del classatributo se aplican por igual al elemento.

La pregunta es: ¿en qué orden aparecen las reglas de estilo en su archivo .css? En su ejemplo, .basicviene después, .extrapor lo que las .basicreglas tendrán prioridad siempre que sea posible.

Si desea proporcionar una tercera posibilidad (por ejemplo, que es .basicpero que las .extrareglas aún deberían aplicarse), necesitará inventar otra clase, .basic-extratal vez, que lo proporcione explícitamente.

— VoteyDisciple
fuente

4

Esto se puede hacer, pero debe ser un poco creativo con sus selectores. Usando selectores de atributos, puede especificar cosas como "comienza con", "termina con", "contiene", etc. Vea el ejemplo a continuación usando su mismo marcado, pero con selectores de atributos.

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

— TravisV
fuente