Cómo especificar el orden de las clases CSS?

Estoy un poco confundido acerca de CSS y el atributo class. Siempre pensé, el orden en el que especifique múltiples clases en el valor del atributo tiene un significado. La clase posterior podría / debería sobrescribir 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>

Esperaría, el tercer ejemplo con class="basic extra" debería tener un borde azul, ya que el borde especificado en extra sobrescribiría el borde de basic.

Estoy usando FF 3 en ubuntu 9.04

 92
csshtml
Author: mixel, 2009-08-24
Source

3 answers

El orden en el que se sobrescriben los atributos de una clase no se especifica por el orden en el que se definen las clases en el atributo de clase, sino donde aparecen en el css

.myClass1 {font-size:10pt;color:red}
.myClass2 {color:green;}

HTML 

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

El texto en el div aparecerá verde y no rojo porque MyClass2 está más abajo en la definición CSS que mi class1. Si tuviera que cambiar el orden de los nombres de las clases en el atributo class, nada cambiaría.

 202
Author: Zoidberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-24 18:30:30

El orden de las clases en el atributo es irrelevante. Todas las clases del atributo class se aplican igualmente al elemento.

La pregunta es: en qué orden aparecen las reglas de estilo en su .archivo css. En su ejemplo, .basic viene después de .extra por lo que las reglas .basic tendrán prioridad siempre que sea posible.

Si desea proporcionar una tercera posibilidad (por ejemplo, que es .basic pero que las reglas .extra aún deben aplicarse), deberá inventar otra clase, .basic-extra quizás, que explícitamente provee eso.

 22
Author: VoteyDisciple,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-24 10:59:07

Esto se puede hacer, pero tienes que ser un poco creativo con tus 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"/>
 1
Author: TravisV,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-10-04 22:04:30