Attribut-Selektoren

[Angy]

Hallo, liebe Gemeinde,

nu habt Ihr mich nach 3 Jahren wieder zurück - sorry auch :) Und direkt eine dumme Frage:

Abgesehen davon, dass man mit Attribut-Selektoren vermutlich noch zu viele Besucher ausschließen würde, da der Monopol-"Browser" die ja nicht versteht, frage ich mich, ob das überhaupt sehr geistreich ist, diese Selektoren einzusetzen:

Einerseits zieht man Styles in eine externe Datei und bietet evtl. sogar die Möglichkeit, jeden Tag ein anderes Design auszuwählen, und andererseits gibt man Elementen AFAIK im HTML-Stream ein Attribut, um ihnen in einem externen File oder im Head andere Attribute zu vergeben?

Wozu ist das gut? So etwa wie eine Untermenge einer Klasse, aber nicht ganz so individuell wie eine ID?

Was ich auch nicht herausfinden konnte: Müssen die Attribute erlaubte Werte haben? Oder wäre es z.B. möglich, in HTML ein <p align="hugo"> zu codieren und dann einen Style p[align=hugo] {...} zuzuweisen? Der Sinn hiervon wäre natürlich, den Attribut-Selektor einzusetzen, ohne tatsächlich einen Style im HTML-Stream vorzugeben. Zugegeben, ich könnte es mal ausprobieren, fiel mir aber gerade erst so ein.

Falls in diesem Durcheinander die ursprüngliche Frage verlorengegangen sein sollte: Wozu sollte man Attribut-Selektoren einsetzen und nicht Klassen oder IDs?

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

[daniel84]

Hallo Angy,

Falls in diesem Durcheinander die ursprüngliche Frage verlorengegangen sein sollte: Wozu sollte man Attribut-Selektoren einsetzen und nicht Klassen oder IDs?

Weil es in gewissen Fällen kürzer und einfacher ist. Denke z.B. an das INPUT-Element und dessen TYPE-Attribut.

Gruss aus Luzern,
Daniel

[Angy]

Hallo, Ihr beiden,

Weil es in gewissen Fällen kürzer und einfacher ist. Denke z.B. an das INPUT-Element und dessen TYPE-Attribut.

*schäm* an Formulare habe ich dabei gar nicht gedacht, das gehört momentan nicht zu meinen Hauptkriegsgebieten, und die anderen Beispiele - naja - die sehen mir im Moment noch etwa zu kompliziert aus ;)

Danke erst mal, dass Ihr mich zurechtgeschubbst habt!

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

[MudGuard]

Hi,

Oder wäre es z.B. möglich, in HTML ein <p align="hugo">

Das ist natürlich Unsinn, denn das align-Attribut des p-Elements erlaubt nicht den Wert "hugo".

Falls in diesem Durcheinander die ursprüngliche Frage verlorengegangen sein sollte: Wozu sollte man Attribut-Selektoren einsetzen und nicht Klassen oder IDs?

Sinnvoll sind Attributselektoren dann, wenn das Attribut sowieso schon vorhanden ist.

z.B.

input[type="text"] { border:none;  }
input[type="button"] { border:2px outset green; }

oder

p[lang|="de"] { color:red; }
p[lang|="en"] { color:green;  }

oder (mit CSS 3)

a[href$=".png"]:after { content:url(icon/png.png) }
a[href$=".pdf"]:after { content:url(icon/pdf.png) }
a[href$=".doc"]:after { content:url(icon/word.png) }

a[href]:before { { content:url(icon/intern.png) }
a[href^="http:"]:before { content:url(icon/extern.png) }

usw.

Wozu sollte man Attribut-Selektoren einsetzen und nicht Klassen oder IDs?

Der class-Selektor gehört zu den Attribut-Selektoren.

cu,
Andreas

[Ashura]

Hallo Angy.

nu habt Ihr mich nach 3 Jahren wieder zurück - sorry auch :) Und direkt eine dumme Frage:

Willkommen zurück.

Abgesehen davon, dass man mit Attribut-Selektoren vermutlich noch zu viele Besucher ausschließen würde, da der Monopol-"Browser" die ja nicht versteht, frage ich mich, ob das überhaupt sehr geistreich ist, diese Selektoren einzusetzen:

Ja, es gibt durchaus sinnvolle Einsatzzwecke.

Einerseits zieht man Styles in eine externe Datei und bietet evtl. sogar die Möglichkeit, jeden Tag ein anderes Design auszuwählen,

Bis hierher ist soweit alles klar.

und andererseits gibt man Elementen AFAIK im HTML-Stream ein Attribut, um ihnen in einem externen File oder im Head andere Attribute zu vergeben?

Aber hier sieht es schon schlechter aus. Wenn du Elementen neue Attribute geben willst, brauchst du eine (client- oder serverseitige) Skriptsprache.

Also was genau meinst du hiermit?

Wozu ist das gut? So etwa wie eine Untermenge einer Klasse, aber nicht ganz so individuell wie eine ID?

Nein, jedes Attribut hat--ebenso wie Elemente--seinen eigenen Verwendungszweck, was es von anderen (relativ) eindeutig unterscheidet.

So dienen src und href zu Referenzierung auf andere Resourcen, rel und rev geben Beziehungen von Dokumenten untereinander an, eine Klasse fasst inhaltlich ähnliche Elemente (zu Gruppen) zusammen und eine ID zeichnet ein Element eindeutig aus.

Es gibt also Abstufungen, aber bis hierher hat dies alles noch nichts (oder wenig) mit Layout zu tun.

Was ich auch nicht herausfinden konnte: Müssen die Attribute erlaubte Werte haben?

Die Attributwerte müssen auf HTML-Ebene der angegebenen DTD gegenüber gültig sein. CSS ist ziemlich egal, was auf HTML-Ebene erlaubt ist und was nicht.

Oder wäre es z.B. möglich, in HTML ein <p align="hugo"> zu codieren und dann einen Style p[align=hugo] {...} zuzuweisen?

Natürlich. Dass der Einsatz des align-Attributes bei Bestehen eines gleichwertigen CSS-Pendants überflüssig ist, muss aber sicher nicht erwähnt werden, oder?

Der Sinn hiervon wäre natürlich, den Attribut-Selektor einzusetzen, ohne tatsächlich einen Style im HTML-Stream vorzugeben.

Was meinst du mit HTML-Stream?

Falls in diesem Durcheinander die ursprüngliche Frage verlorengegangen sein sollte: Wozu sollte man Attribut-Selektoren einsetzen und nicht Klassen oder IDs?

Beispiele gefällig?

HTML:

<a href="mailto:[e-mail]">Mail me</a>  
<a href="http://example.org">Example</a>

CSS:

a[href^=http]:before{content:"➨ ";}  
a[href^=mailto]:before{content:"✉ ";}

HTML:
<p>In diesem Text behandeln wir das Thema <span lang="en" title="Content Management System">CMS</span></p>

CSS:

span[lang=en]{background:#900;color:#ddd;}  
span[lang=en]:after{content:"("attr(title)")";}

HTML:
<a href="http://example.com target="_blank">Vorsicht, neues Fenster / neuer Tab</a>

CSS:
a[target]{cursor:ne-resize;}

...
(Es gibt sicher noch mehr sinnvolle Beispiele; dies sind erst einmal die, die mir als erstes eingefallen sind.)

Und warum hier extra Klassen setzen? Bestehende Attribute genügen oft bereits zur Selektion, doch leider wird uns diese Möglichkeit bekanntlich verwehrt...

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Mach dir nichts draus.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ashura]

Hallo.

HTML:
<p>In diesem Text behandeln wir das Thema <span lang="en" title="Content Management System">CMS</span></p>

Hier wäre natürlich das abbr-Element für die Abkürzung passender.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Angy]

Willkommen zurück.

Danke, Ashura

Also was genau meinst du hiermit?

Missverständnis! Ich wollte sagen, dass innerhalb des HTML-Textes ein Style angegeben wird, was mir wie ein Bruch im System vorkommt. "unten" z.B. <p align="left"> zu schreiben und "oben" dann weitere oder andere Attribute dazu zu definieren. Aber weiter unten hast Du ja schon erwähnt, wieso und wo das sinnvoll sein kann.

Oder wäre es z.B. möglich, in HTML ein <p align="hugo"> zu codieren und dann einen Style p[align=hugo] {...} zuzuweisen?

Natürlich. Dass der Einsatz des align-Attributes bei Bestehen eines gleichwertigen CSS-Pendants überflüssig ist, muss aber sicher nicht erwähnt werden, oder?

Der Sinn hiervon wäre natürlich, den Attribut-Selektor einzusetzen, ohne tatsächlich einen Style im HTML-Stream vorzugeben.

Was meinst du mit HTML-Stream?

Was ich sagen wollte, immer von meinem Wissensstand vorhin ausgehend:  Wenn ich nicht Styles "unten" im HTML und "oben" im CSS verteilen will, dann wäre vielleicht ein Fake-Attribut "unten" als Aufhänger für einen Attribut-Selektor "oben"... grrrh!

Beispiele gefällig?

HTML:

<a href="mailto:[e-mail]">Mail me</a>

<a href="http://example.org">Example</a>

  
Geht das mit den eckigen Klammern?  
  

> CSS:  
> ~~~css

a[href^=http]:before{content:"➨ ";}  

> a[href^=mailto]:before{content:"✉ ";}

(Es gibt sicher noch mehr sinnvolle Beispiele; dies sind erst einmal die, die mir als erstes eingefallen sind.)

Tolle Beispiele, echt. Aber ich bin mir nicht sicher, ob ich sie verstanden habe. Vielleicht sollte ich den Sonnenaufgang abwarten ;)

Und warum hier extra Klassen setzen?

Ich hatte das Konzept so verstanden, als ob man ein Attribut nur zu dem Zweck vergeben sollte, um "oben" Attribut-Selektoren verwenden zu können. Deshalb die Aufregung.

Mach dir nichts draus.

Ich kenns ja ;)

Einen schönen Mittwoch noch.

Dir auch, danke noch mal.

Angy

[Gunnar Bittersmann]

"unten" z.B. <p align="left"> zu schreiben und "oben" dann weitere oder andere Attribute dazu zu definieren.

Angy,
Mit „Attribute“ meinst du hier CSS-Eigenschaften? Und nein, es ist nicht sinvoll, das (missbilligte) align-Attribut zu verwenden. Layoutangaben gehören komplett nach „oben“ (womit du das Stylesheet meinst?) oder in eine externe Datei.

wäre vielleicht ein Fake-Attribut "unten" als Aufhänger für einen Attribut-Selektor "oben"... grrrh!

Da wird nichts gefaket. Du verwendest die Attribute ausschließlich ihrer Bedeutung entsprechend – unabhängig von der gewünschten Darstellung.

Ich hatte das Konzept so verstanden, als ob man ein Attribut nur zu dem Zweck vergeben sollte, um "oben" Attribut-Selektoren verwenden zu können.

Wenn du ein Attribut ausschließlich zu diesem Zweck vergibst, dann entweder das class- oder das id-Attribut, um „oben“ bzw. extern Klassen- oder ID-Selektoren verwenden zu können.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

Hi Angy,

Falls in diesem Durcheinander die ursprüngliche Frage verlorengegangen sein sollte: Wozu sollte man Attribut-Selektoren einsetzen und nicht Klassen oder IDs?

Der Klassenselektor ist auch nur eine andere Schreibweise für einen speziellen Attributselektor. [CSS2 §5.8.3] Und zwar nur für (X)HTML; für anderes XML gibt es zwar den ID-Selektor, nicht jedoch den Klassenselektor.

Ganz einfach gesagt: Attributselektoren lassen sich dann sinnvoll einsetzen, wenn du mit den schon vorhandenen Attributen die gewünschten Selektionen erreichen kannst, ohne extra noch Klassen oder IDs (also zusätzliche Attribute) zu vergeben.

Attributselektoren lassen sich bspw. (neben der Pseudoklasse :lang) zur unterschiedlichen Darstellung von Texten in verschiedenen Sprachen einsetzen; u.a. für sprachabhängige Anführungszeichen. [CSS2 §12.4]

Oder zur unterschiedlichen Darstellung von Links: solche, die mit "http://" beginnen, bekommen ein anderes Icon als solche, die das nicht tun (interne).

Der Anwendungsmöglichkeiten gibt es viele …

Live long and prosper,
Gunnar

[MudGuard]

Hi,

Der Klassenselektor ist auch nur eine andere Schreibweise für einen speziellen Attributselektor. [...] Und zwar nur für (X)HTML; für anderes XML gibt es zwar den ID-Selektor, nicht jedoch den Klassenselektor.

UAs may apply selectors using the period (.) notation in XML documents if the UA has namespace specific knowledge that allows it to determine which attribute is the "class" attribute for the respective namespace.
(http://www.w3.org/TR/2005/WD-CSS21-20050613/selector.html#class-html)

cu,
Andreas

[Gunnar Bittersmann]

Der Anwendungsmöglichkeiten gibt es viele …

… eine hatte ich in http://gunnarbittersmann.de/2005/breadcrumbs-20050722.html benutzt, der Sinn steht in http://forum.de.selfhtml.org/archiv/2005/7/t111671/#m704726.

Live long and prosper,
Gunnar

[Tim Tepaße]

Hallo Angelo

Einerseits zieht man Styles in eine externe Datei und bietet evtl. sogar die Möglichkeit, jeden Tag ein anderes Design auszuwählen, und andererseits gibt man Elementen AFAIK im HTML-Stream ein Attribut, um ihnen in einem externen File oder im Head andere Attribute zu vergeben?

Es gibt da noch zwei weitere Aspekte, die noch nicht behandelt worden sind:

Es wird immer mehr dazu übergegangen, dass nicht mehr fest in den Browser einprogrammiert sind, wie HTML Elemente darzustellen sind, sondern der Browser besitzt ein eigenes Stylesheet, das Browserstylesheet, dass die Grunddarstellung von HTML besorgt. Das heißt, CSS soll alles definieren, wie Links aussehen, wie Formularelemente aussehen, etc. Und Autoren von Webseiten sollen die Möglichkeit haben, das abzuändern. Mit dem derzeitigem Sprachumfang von CSS 2 ist das noch nicht wirklich schaffbar, CSS 3 soll da schon mehr bieten. Und dann braucht man so einen Selektor, z.B. um reine Anker von Hyperlinks zu differenzieren oder unterschiedliche Darstellung für die verschiedenen input-Elemente zu definieren.

Und es gibt natürlich nicht nur HTML sondern auch andere XML-Formate, die Oberfläche XUL von Mozilla-Produkten nutzt auch viel CSS. D.h. CSS ist schon durchaus über die Anwendung HTML hinaus.

Tim

[Thomas Meinike]

Hallo,

Und es gibt natürlich nicht nur HTML sondern auch andere XML-Formate, die Oberfläche XUL von Mozilla-Produkten nutzt auch viel CSS. D.h. CSS ist schon durchaus über die Anwendung HTML hinaus.

Guter Punkt.

Beim Auszeichnen von SVG-Dokumenten ist es z. B. praktisch, CSS-Formatierungen an bestimmte -- mehrfach auftretende -- Koordinaten zu binden. In diesem Beispiel werden Attributselektoren mit den Mittelpunktskoordinaten von Kreisen (also die Attribute cx und cy) verwendet.

MfG, Thomas

[Angy]

Hallo Angelo

Hi, Tim,

Du kennst mich?

Es gibt da noch zwei weitere Aspekte, die noch nicht behandelt worden sind:

Ich denke, ich sollte mich mal still zurückziehen und das Forum nur mitlesen, so 10, 20 Jahre, bis ich fit genug bin, selber mal wieder was zu sagen ;(

Danke Dir und den anderen lieber Toastern!

Angy