Class/ID CSS im Namen keine Punkte (Sonderzeichen)

[Zeropainter]

Class/ID CSS im Namen keine Punkte (Sonderzeichen) erlaubt?

Habe mir letztens eine GetSkeletonVorlage besorgt, aber habe was sehr komisches beim Arbeiten bemerkt, zum Beispiel bei dem CSS Beispiel

....
.one.half-columns
....

der erste Punkt ist normal, den gebe ich auch im HTML nicht wieder, das ist nicht das Problem. Das Problem war der zweite Punkt, hab den gelöscht und nun läuft es sehr gut. Unnützte Punkte habe ich auch bei den anderen Vorgaben im Namen gelöscht und auch gleich ins deutsche Übersetzt, wenn schon denn schon. Aber irgendwas kommt mir trotzdem spanisch vor,m dass ich die Punkte löschen musste, damit getskeleton - endlich reibungslos lief.

 

[hub]

.one.half-columns

bedeutet im Html z.B. <div class="one half-columns" ... also beide Klassen in einer Zuweisung mit Leerzeichen getrennt.

 

[Zeropainter]

Danke, fands irritierend, also ist der zweite Punkt dann später im HTML Bereich durch ein Leerzeichen zu ersetzen , der erste definiert ja KLASSE = ., # = id

 

[Myhar]

Der Punkt wird nicht durch ein Leerzeichen ersetzt. Ein Element kann mehrere Klassen haben (im Gegensatz zu einer ID), und man kann auch Elemente mit mehreren Klassen selektieren.

Bsp anhand eines Buttons:

<button class="btn btn-warning btn-large"> text </button>
<button class="btn btn-error btn-large"> text </button>

button, .btn{font-size:10px; color: green; border: 1px solid blue}
.btn.btn-large{font-size: 20px}
.btn-large.btn-error{font-weight: bold}
.btn-small.btn-error{font-style:underline}

Die letzte CSS-Anweisung greift hier auf keinen Button, man müsste ein Element mit btn-small und btn-error haben, damit diese Anweisung greift.
Das verknüpfen von Klassen ermöglicht es einem, verschiedene Stile zu kombinieren und dann Abweichungen davon zu erstellen: in dem Beispiel haben alle btn, die auch btn-large sind, eine Schriftgröße von 20px, alle btn, die keinen Zusatz haben, haben nur eine Schriftgröße von 10px. Sicher, man kann das auch anders lösen, aber das ist doch eine wichtige Grundlage von CSS, bei der es gut ist, wenn man sie versteht (und auch anwenden kann)

 

[Lobster1956]

im CSS heißt der "." dann letztlich "hat die klasse", genauso heißt "#" dann "hat die ID" !!!
h1.headline heißt "eine h1 mit der klasse headline"
h1.headline.primary heißt "eine h1 mit den beiden klassen headline und primary"
h1.headline .primary (man beachte das leerzeichen) heißt: "ein beliebiges Element mit der Klasse primary irgendwo innerhalb einer h1 mit der Klasse headline

woraus sich logischerweise auch ergibt das es niemals . und # in Klassen/IDs geben darf (genauer keinerlei Sonderzeichen außer - ) und beginnen dürfen Bezeichner übrigens NUR mit Buchstaben ... ACHTUNG: CaseSensitiv)