Verständnisfrage: Klassen innerhalb von IDs

[Jokai olvaso]

Ich habe auf einer Seite ein DIV das mit einer ID versehen ist.

#div_id {
background: blue;
}

Der dazugehörige HTML-Code (Auszug):

<div id="div_id">
<p>Blablub</p>
</div>

Innerhalb dieses DIVs habe ich den Paragraphen <p> eine Standardformatierung zugewiesen:

#div_id p {
width: 80%
}

definiere ich jetzt eine Klasse mit einer anderen Breite, z.B.

.lesswidth {
width: 60%;
background: yellow;
}

Dazugehöriger HTML-Auszug:

<div id="div_id">
<p class="lesswidth">Blablub</p>
</div>

dann wird dies ignoriert, also komplett - nicht nur die Breite, sondern alle Anweisungen. Warum ist dies so? Bzw. ist das immer so, oder mache ich irgendwo etwas falsch?

Ändere ich das CSS wie folgt:

#div_id p.lesswidth {
width: 60%;
background: yellow;
}

dann wird es (natürlich?) auch angezeigt, nur würde ich besagte Klasse gerne flexibler einsetzen, ohne mich zu wiederholen.

(Die Anweisungen sind nur Platzhalter um hier nicht den vollständigen CSS-Code angeben zu müssen)

[Boris]

Du machst nichts falsch, das hat etwas mit der Priorität von IDs/Klassen zu tun: http://de.selfhtml.org/css/formate/k...tm#spezifitaet

Oder, etwas "verständlicher" mit Star Wars Figuren: http://www.stuffandnonsense.co.uk/ar...city_wars.html

[Jokai olvaso]

Ahh, danke. Also - wenn ich das richtig sehe - gibt es keine Möglichkeit in entsprechendem obigen Konstrukt dem <p> noch eine Klasse zuzuweisen?

[steffenk]

doch natürlich.

Du kannst das verhalten auch erzwingen:
.lesswidth {width: 60% !important; }

Trotzdem solltest Du spezifisch definieren

#div_id p {width: 60%;}

[Jokai olvaso]

steffenk: Danke! Wieso genau sollte ich das spezifisch definieren?

Vielleicht ist auch einfach mein Grundansatz falsch:

Ich habe mehrere Unterseiten die jeweils auf einem von drei "Container-Divs" aufbauen, die per ID definiert sind. Innerhalb dieser Container-DIVs sehen die einzelnen Elemente recht ähnlich aus. Daher hätte ich gerne Klassen, die ich für alle drei Fälle anwenden könnte.

[steffenk]

es geht um folgendes: In der Klasse definierst Du eine Breite. In der ID auch, also geht ID vor. Es ist was anderes wenn Du sowas benutzt:
.rot {color:red;}
und Du machst keine color-Anweisung in der ID, dann greift die Klasse immer wenn sie eingesetzt wird. Wenn Du spezifisch definierst, weisst Du das es immer greift.