#inhalt p {...} mit .class überschreiben nicht möglich?

[michaah]

im stylsheet existiert (u.a.):

#inhalt {
   margin: 3em auto;    /* standardkonforme horizontale Zentrierung */
   background: #FBEDC1;
   width: 66%; height: 100%;
   color: #000; }

#inhalt p {
   font-size: 1em;
   line-height: 1.5em;
   color: black;
   }

.klein {font-size:66%;}

Im entsprechenden <div id="inhalt>" gelingt es nun nicht mit

<p class="klein">text soll kleiner werden</p>

die fontgröße abweichend von der vorgabe entsprechend zu verkleinern.

<p style="font-size:66%">text soll kleiner werden</p>

funktioniert jedoch.

Dazu die allgemeine frage:
Gibt es einen nachvollziehbaren grund, warum eine class keine wie oben verschachtelten zuweisungen überschreiben kann. Geht das grundsätzlich nicht oder mache ich etwas falsch?

[wahsaga]

hi,

Gibt es einen nachvollziehbaren grund, warum eine class keine wie oben verschachtelten zuweisungen überschreiben kann.

Beschäftige dich mit der Spezifität von Selektoren.

gruß,
wahsaga

[michaah]

Beschäftige dich mit der Spezifität von Selektoren.

Danke für den hinweis.

"The declaration in the "style" attribute will override the one in the STYLE element" ist klar, war ja auch im vom mir geposteten beispiel so.

Die spezifität von allgemeinen klassen war auf der von dir verlinkten seite zunächst nicht klar erkennbar, aber ein versuch mit:

#inhalt p.klein {font-size:66%;}

brachte den gewünschten erfolg.

Ich gehe mal davon aus, dass die allgemeine schlußfolgerung daraus in etwa heißt:
Die deklaration einer klasse gilt immer nur innerhalb des konkreten kontext für den sie definiert wurde, eine allgemein klasse kann daher nur auf ein allgemeines element angewandt werden, nicht jedoch für ein näher spezifiziertes. Dafür müßte dann eine neue, ebenso spezifische klasse definiert werden.

Richtig?

[rfb]

Moin

Ich gehe mal davon aus, dass die allgemeine schlußfolgerung daraus in etwa heißt:
...
Richtig?

Nein.
Vielleicht wird es deutlicher aus diesem deutschsprachigen Beitrag: Berechnung der Spezifizität

Gruß
rfb

[Jonathan]

Hallo,

Richtig?

Nein.

Mal als Beispiel deines Codes:

#inhalt p { /* Spezifität: 0101 */
   font-size: 1em;
   line-height: 1.5em;
   color: black;
   }

.klein { /* Spezifität: 0010 */
   font-size:66%;
   }

Wie man sieht, ist der obere Selektor spezifischer. Das heißt, dass im Zweifelsfall die obere Angabe Vorrang hat.

Das Problem kannst du, wie schon gesagt, lösen, indem du entweder die Spezifität des unteres Selektors erhöhst (z.B. durch "#inhalt .klein", was die Spezifität 0110 hätte und somit spezifischer wäre) oder indem du einfach die Angabe font-size:1em im oberen Bereich entfernst (die sowieso m.M.n. überflüssig ist).

Jonathan