CSS Tag Gruppierungen

[cssler]

Hallo

Kann man mit CSS 2.1 HTML Tags gruppieren, so dass man danach nur jeweils 1 Tag ansprechen muss?

Also in etwa so:
header -> div.header

Danach definiere ich alle Klassen { color:xy} nur noch auf header, aber auch alle divs mit id header werden berücksichtig...geht das?

gruss und thx

[dave]

hi,

Also in etwa so:
header -> div.header

geht so:
header, div.header {...}

Danach definiere ich alle Klassen { color:xy} nur noch auf header, aber auch alle divs mit id header werden berücksichtig...geht das?

das gingen so:
header, div#header {...}

~dave

[Cssler]

Hallo ihr beiden

erstmals sorry, ging ein bisschen schnell und habe darum nicht die richtigen Ausdrücke verwendet....

Also:

-> header, div.header {...}
--> Genau, soweit bin ich auch schon..ob header eine Klasse (wie hier) oder eine ID (#) ist, spielt für mich keine Rolle (also bzgl. meiner Frage ;) ).
--> Meine Frage: Ist es möglich, das Ganze so zu notieren, dass ich danach (also irgenwo unterhalb dieser Definition im CSS File) nur noch header ansprechen muss, jedoch css bsw. die Browser immer auch div.header mit einbeziehen?
Also anstelle header p, div.header p{} nur noch header p{} und dabei wird auch das div mit class header berücksichtigt (bsw. alle <p> in ihm)?

Hoffe nun ist meine Frage ein bisschen klarer?

Gruss und Dank

[Gunnar Bittersmann]

@@Cssler:

nuqneH

--> Meine Frage: Ist es möglich, das Ganze so zu notieren, dass ich danach (also irgenwo unterhalb dieser Definition im CSS File) nur noch header ansprechen muss, jedoch css bsw. die Browser immer auch div.header mit einbeziehen?
Also anstelle header p, div.header p{} nur noch header p{} und dabei wird auch das div mit class header berücksichtigt (bsw. alle <p> in ihm)?

Nein.

Das wäre auch kaum sinnvoll.

Qapla'

[Havyrl]

Das wäre auch kaum sinnvoll.

CSS verschachteln fände ich gar nicht mal so sinnlos.

Statt:
#content .left {}
#content .right{}
#feet .left {}
#feet .right{}

Quasi:

#content {
  .left {}
  .right{}
}
#feet {
  .left {}
  .right{}
}

Wenn man mal etwas mehr verschachteln muss (z.b. bei der Navi) wäre das einerseits besser zu lesen und andererseits könnte man auch schneller mal was ändern.

[Gunnar Bittersmann]

@@Havyrl:

nuqneH

#content {
  .left {}
  .right{}
}
#feet {
  .left {}
  .right{}
}

Wenn man mal etwas mehr verschachteln muss (z.b. bei der Navi) wäre das einerseits besser zu lesen und andererseits könnte man auch schneller mal was ändern.

Du möchtest dir SASS ankucken.

Qapla'

[Gunnar Bittersmann]

@@cssler:

nuqneH

Kann man mit CSS 2.1 HTML Tags gruppieren, so dass man danach nur jeweils 1 Tag ansprechen muss?

Also in etwa so:
header -> div.header

Danach definiere ich alle Klassen { color:xy} nur noch auf header, aber auch alle divs mit id header werden berücksichtig...geht das?

Da du falsche Begriffe verwendest, ist es schwer, dein Anliegen richtig zu verstehen.

Eine Klasse "foo" sind in diesem Zusammenhang die Elemente, die im HTML ein @class-Attribut haben, in dessen Wert auch "foo" vorkommt. Bsp.: <p class="foo"> und <ul class="foo bar"> gehören zur Klasse "foo".

Elemente einer Klasse lassen sich mittels CSS-Klassenselektor gleich stylen. [CSS2 §5.8.3, http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=SELFHTML] (Mitunter sprechen manche deshalb von „CSS-Klassen“; der Begriff ist aber falsch.)

Eine Regel besteht aus Selektor und Deklarationsblock. '{color: #F00}' ist ein Deklarationsblock mit einer Deklaration 'color: #F00'. [CSS2 §4.1.7] 'color' nennt sich Eigenschaft, "#F00" ist ihr Wert. [CSS2 §4.1.8]

Und ja, Selektoren lassen sich mit Komma gruppieren. [CSS2 §5.2.1, http://de.selfhtml.org/css/formate/zentrale.htm#elemente@title=SELFHTML]

Warum sprichst du von „alle[n] divs mit id header“? Es darf in einem Dokument nur ein Element mit der ID "header" geben.

Qapla'

[MudGuard]

Hi,

Da du falsche Begriffe verwendest, ist es schwer, dein Anliegen richtig zu verstehen.

Eine Klasse "foo" sind in diesem Zusammenhang die Elemente, die im HTML ein @class-Attribut haben, in dessen Wert auch "foo" vorkommt.

Bsp: <div "youareafool">.

daher: in dessen class-Attribut auch die Klasse foo vorkommt.

cu,
Andreas

[Deus Figendi]

Was du willst ist ein "Alias" für eine Selektion definieren. Das wäre wahrscheinlich eine gute Fragestellung gewesen, füge ggf. hinzu dass du eine "ganze" Selektion (z.B. element element.class) meinst und nicht nur einen einzelnen Selektor.

Die Antwort lautet: Nö!

Aber du kannst natürlich Klassen wie IDs selektieren ohne den Element-Typ anzugeben, soweit das bei dir praktikabel ist. Wenn du also
div.header
abkürzen willst und du hast eh nur DIVs mit dieser Klasse kannst du natürlich .header verwenden.

Im Übrigen ist

header -> div.header
Danach definiere ich alle Klassen { color:xy} nur noch auf header, aber auch alle divs mit id header werden berücksichtig...geht das?

Ein total bescheidenes Beispiel, wenn du anschließend
header {}
definierst, woher soll der Browser wissen dass du ein selbst definiertes Alias meinst und nicht das header-Element, welches mit HTML5 eingeführt wurde?
Aber selbst wenn du eine Klasse gewählt hättest, die nicht wie ein Element heißt heißt sie ggf. doch wie ein Element, denn du kannst ja (nachdem du den Namensraum eingebunden hast) beliebige Elemente hinzufügen.
Das ist alles ein bisschen viel verlangt von einem Browser, wenn überhaupt (und ich finde das durchaus interessant) müsste man ein weiteres Steuerzeichen einführen (P|pe zum Beispiel oder Mi-us ist auch noch unbelegt).

Aus deiner Idee mit dem .header wird header entspinnt mir aber auch der Gedanke ob es nicht interessant wäre dem Browser sagen zu können "style diese Elemente wie $andereElemente". Womit man dann ggf. auf Browser-Sheets zurückgreifen kann. So nach dem Motto:
div {
 body; /* Style div wie body ausser... */
 border-style:solid;
 margin:0.5em;
 display:block;
 /* (...) */
}
So könnte man z.B. die Hintergrundfarbe oder -bild des Browsers übernehmen. Noch geschickter wäre, wenn man speziefische styles greifen kann :)

Bei sowas wäre aber zu bedenken, dass Browser afaik CSS-Regeln seriell abarbeiten, d.h. ist body noch nicht definiert könnte man auf dessen Styles noch nicht zugreifen... okay blödes Beispiel ^^ Ich mein' halt: Man könnte solche Zugriffe nur auf Element machen, die man vorher bereits formatiert hat, nicht solche, die man noch formatieren wird.

Ach ich schweife ab ^^

[Gunnar Bittersmann]

@@Deus Figendi:

nuqneH

[…] denn du kannst ja (nachdem du den Namensraum eingebunden hast) beliebige Elemente hinzufügen.

Wenn’s nicht valide sein soll.

Aber wo du Namensräume ins Spiel bringst …

(P|pe zum Beispiel oder Mi-us ist auch noch unbelegt).

Nein. Du möchtest dir das CSS Namespaces Module ansehen.

div {
body; /* Style div wie body ausser... */

Auf SASS hatte ich ja schon hingewiesen.

Qapla'

[Deus Figendi]

@@Deus Figendi:

nuqneH

[…] denn du kannst ja (nachdem du den Namensraum eingebunden hast) beliebige Elemente hinzufügen.

Wenn’s nicht valide sein soll.

Öhm es ist dann wahrscheinlich kein valides (X)HTML mehr aber immernoch valides XML. Und CSS kann man in der Regel auf XML-Dokumente anwenden.
Im Grunde hat doch niemand behauptet, dass es überhaupt um HTML geht :-p (hab ich aber natürlich genauso angenommen).
Aber es ging mir ja vor allem darum klar zu machen, dass das recht viel verlangt ist vom Parser. Ob das "zu viel" verlangt ist will ich nicht behaupten, aber es ist viel und wenn ich jetzt behaupte es ist unnötig viel (weil man eben ein Steuerzeichen verwenden könnte) dann ist es folglich doch _zu_ viel :)

Aber wo du Namensräume ins Spiel bringst …

(P|pe zum Beispiel oder Mi-us ist auch noch unbelegt).
Nein. Du möchtest dir das CSS Namespaces Module ansehen.

Oha, da lese ich irgendwie nur Pipes, aber die Minusen ;) gibt es ja auf jeden Fall in den Browser-spezifischen Eigenschaften, also -moz- -o- -webkit- und ich habe gehört seit einiger Zeit gäbe es auch -ie- (oder -ms- ? hab ich vergessen), was ja irgendwie auch so ähnlich wie Namensräume ist...
Naja, ich bin fast sicher € ist noch nicht in Nutzung, die US-Amerikaner werden sich freuen :D Von mir aus aber auch ╣ oder ø oder sonst was :) Hab' doch eh nur rumgesponnen.

[Gunnar Bittersmann]

@@Deus Figendi:

nuqneH

[…] denn du kannst ja (nachdem du den Namensraum eingebunden hast) beliebige Elemente hinzufügen.
Öhm es ist dann wahrscheinlich kein valides (X)HTML mehr aber immernoch valides XML.

Nein, das auch nicht. Valide heißt: den Regeln der DTD bzw. des XML Schemas entsprechend. Darin ist genau festgelegt, welche Elemente und Attribute an welcher Stelle im Dokument vorkommen dürfen und was für Inhalt bzw. Werte sie haben dürfen.

Du kannst eine DTD bzw. ein XML Schema erstellen, das die Einindung _bestimmter_ Elemente aus anderen Namensräumen erlaubt (bspw.[XHTML+MathML+SVG]), aber nicht _beliebiger_.

Du verwechselst valide (gültig) und wohlgeformt. [XML] Sollte man nicht.

Qapla'