direkter Zugriff durch ID

[Kalle]

Hi Leute. Ich hab grad schon die CSS-Doku bemüht aber keine Erklärung für folgendes Phänomen gefunden:

Diesen Block möchte ich mit CSS stylen. Unnötiges hab ich weggeschnitten.

<div id="intro">
    ...
    <form method="post" action="#">
        <label>Benutzername:</label><input type="text" name="username" />
        <label>Pa&szlig;wort:</label><input type="password" name="password" />
        <input id="submitbutton" type="submit" value="Anmelden" />
    </form>
</div>

Das verwendete Stylesheet enthält diese Angaben.

#intro form label, #intro form input {
    display: block;
    margin: 0px;
    padding: 0px;
}
#intro form input {
    width: 100%;
    margin: 5px 0px 15px 0px;
}

Um nun den Submit-Button von der Breitenangabe auszunehmen, habe ich eine weitere Angabe ins Stylesheet eingefügt.

#submitbutton { width: auto; }

Allerdings bewirkt das nichts. Erst wenn ich

#intro form #submitbutton { width: auto; }

verwende, kommts beim Submit-Button an. Das W3C empfiehlt zwar, die Elemente nicht wie wild mit IDs zu bestücken und nur darüber in CSS anzusprechen, wenn es auch anders geht, aber funktionieren sollte es doch trotzdem. Die ID kennzeichnet das Element ja eindeutig. Warum muß ich mit "#intro form" erst "einen Weg dahin zeigen"?

[Marian]

Hi Kalle,

<label>Benutzername:</label><input type="text" name="username" />

name="password" />
So bringt das label herzlich wenig. Du musst auch angeben, für welches input es ist. Siehe http://de.selfhtml.org/html/formulare/strukturieren.htm#label

#submitbutton { width: auto; }
Allerdings bewirkt das nichts. Erst wenn ich
#intro form #submitbutton { width: auto; }
verwende, kommts beim Submit-Button an. Das W3C empfiehlt zwar, die Elemente nicht wie wild mit IDs zu bestücken und nur darüber in CSS anzusprechen, wenn es auch anders geht, aber funktionieren sollte es doch trotzdem. Die ID kennzeichnet das Element ja eindeutig. Warum muß ich mit "#intro form" erst "einen Weg dahin zeigen"?

Das hat eine höhere Spezifizität (ich find den link grad nicht mehr).

Viele Grüße aus Freiburg,
Marian

[Gunnar Bittersmann]

Das hat eine höhere Spezifizität (ich find den link grad nicht mehr).

[CSS21 §6.4.3 (Weil sich in CSS 2.1 gegenüber CSS 2.0 was geändert hat, hier mal der Link zum englischen Original)

Live long and prosper,
Gunnar

[Kalle]

Das hat eine höhere Spezifizität (ich find den link grad nicht mehr).

[CSS21 §6.4.3 (Weil sich in CSS 2.1 gegenüber CSS 2.0 was geändert hat, hier mal der Link zum englischen Original)

Ah, vielen Dank ihr beiden! Diese Berechnungsmethode hatte ich anscheinend noch nicht so recht verinnerlicht (auch wenn das gar kein CSS2-spezifisches Problem ist).

[Kalle]

So bringt das label herzlich wenig.

Ja du hast recht, das "for" hab ich vergessen. Danke für den Hinweis.