nicht angemeldet
Gewichtung der Selektoren
MudGuard
Gunnar Bittersmann
Gernot BackHallö ins Forum,
ich hab ne kurze Verständnisfrage zu http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet: Darf ich im Stylesheet in dieser Form notieren elem#id.class?
Danke für Unterstützung und
Grüße aus Leipzig
willie
-
Hallo,
Darf ich im Stylesheet in dieser Form notieren
elem#id.class?Das ist das Element mit der ID id und der Klasse class, also es werden dadurch nur
<elem id="id" class="class">foo bar</elem>angesprochen, und nichts anderes. Diese hier werden dadurch _nicht_ angesprochen (nur ein paar Beispiele):
<elem class="class">foo bar</elem>
<elem id="id" >foo bar</elem>
<elem>foo bar</elem>
<em id="id" class="class">foo bar</em>Grüße
Jeena Paradies-
Hallö ins Forum,
Das ist das Element mit der ID id und der Klasse class,
Ich übersetze: Ja, ich darf.
Zur Erklärung: (bitte nicht hauen ;-)
Ich verwende im Stylesheet recht häufig Notierungen wie z.B.
~~~css p.a { border:double medium green; }
p[class] { border-color:red; }um irgendwelche Sachen auch für den M$IE schick zu machen. Mit der ID funktioniert das aber nicht. ~~~css p#a { border:double medium green; } p[id] { border-color:red; }Da alles recht verzwickt ist und ich mich auf die ID beziehen "muss", hab ich dann halt noch ne Klasse zugefügt.
Danke und schönes WoE!
williePS: Ich hab mir n neues Board eingebastelt und dachte, das geht schneller...
-
Hallo,
~~~css
p.a { border:double medium green; }
Das ist ein <p class="a"> welches hier angesprochen wird.p[class] { border-color:red; }
Das ist jedes <p> welches ein gesetztes Attribut class hat, also zum Beispiel <p class="foo"> > Mit der ID funktioniert das aber nicht. Doch das funktioniert ganz genau so > ~~~css p#a { border:double medium green; } Das ist ein <p id="a"> > p[id] { border-color:red; }Das ist jedes <p> welches ein gesetzes id Attribut hat, also zum Beispiel <p id="bar">
Da alles recht verzwickt ist und ich mich auf die ID beziehen "muss", hab ich dann halt noch ne Klasse zugefügt.
Hm so kompliziert ist das doch eigentlich gar nicht, aber vielleicht hilft dir ja dieser Beitrag und dieses Bild weiter:
Grüße
Jeena Paradies-
Hallö nochmal, Jeena,
ich hab wie schon angedeutet grad mein System neu aufgesetzt. Deswegen bin ich noch nicht ganz handlungsfähig und außerdem in Zeitnot. Trotzdem hab ich mir schnell mal n ppar aktuelle Browser runter geladen...
Doch das funktioniert ganz genau so
Kopier das doch bitte mal in deinen Editor und sag mir, welcher Browser beide borders red (nicht beide green ;-) anzeigt!
<html> <head> <style type="text/css"> <!-- p#a { border:double medium green; } p[id] { border-color:red; } p.a { border:double medium green; } p[class] { border-color:red; } --> </style> </head> <body> <p id="a"> </p> <p class="a"> </p> </body> </html>Danke für Unterstützung und
Grüße aus Leipzig
willie-
Hallo,
Doch das funktioniert ganz genau so
Kopier das doch bitte mal in deinen Editor und sag mir, welcher Browser beide borders red (nicht beide green ;-) anzeigt!Aaah jetzt kappiere ich erst die Frage ;-)
Grüße
Jeena Paradies -
Hi,
Kopier das doch bitte mal in deinen Editor und sag mir, welcher Browser beide borders red (nicht beide green ;-) anzeigt!
Nur einer, der kaputt ist.
Begründung: https://forum.selfhtml.org/?t=124428&m=801855cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallö, MudGuard,
Nur einer, der kaputt ist.
Begründung: https://forum.selfhtml.org/?t=124428&m=801855Du übersiehst vielleicht, dass es zwei Absätze sind, die jeweils (genau) eine id oder eine class besitzen?!
Grüße aus Leipzig
willie-
Hi,
Du übersiehst vielleicht, dass es zwei Absätze sind, die jeweils (genau) eine id oder eine class besitzen?!
Nö. Du übersiehst meine Begründung.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallö nochmal,
ich hatte in meinem Eingangsposting übrigens auf den Kontext verwiesen, auf den du dich beziehst. Meine Frage war nebenbei ganz konkret und ziemlich schnell beantwortet: "Darf ich im Stylesheet in dieser Form notieren elem#id.class?"
Vielleicht irre ich mich ja. (Womit eigentlich?) Aber du schlenkerst jetzt um eine Antwort herum:
Nö. Du übersiehst meine Begründung.
Bitte, welcher deiner Browser ist am meisten kaputt und kann die border unter der id ändern?
<html> <head> <style type="text/css"> <!-- p#a { border:double medium green; } p[id] { border-color:red; } p.a { border:double medium green; } p[class] { border-color:red; } --> </style> </head> <body> <p id="a"> </p> <p class="a"> </p> </body> </html>Grüße aus Leipzig
willie
-
-
-
-
-
-
Hi,
Mit der ID funktioniert das aber nicht.
Natürlich nicht.
.bla ist ein Attributselektor
[class='bla'] (oder auch nur [class]) ist ein Attributselektor.
==> selbe specificity ==> Deklarationen unter dem zuletzt genannten Selektor überschreiben ggf. die unter dem zuerst genannten Selektor.#bla ist ein id-Selektor
[id='bla'] (oder auch nur [id]) ist ein Attributselektor.id-Selektoren haben höhere specificity als Attributselektoren ==> die Reihenfolge ist egal, Deklarationen unter dem höherwertigen Selektor gewinnen unabhängig von der Reihenfolge der Rulesets.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard.
Deklarationen unter dem höherwertigen Selektor gewinnen unabhängig von der Reihenfolge der Rulesets.
Sie gewinnen?
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/ -
Hallö MudGuard,
danke für deine Unterstützung!
Du kannst bestimmt meine Aufgabe/Frage beantworten: https://forum.selfhtml.org/?t=124428&m=801749.
Grüße aus Leipzig
willie
-
-
-
-
Hello out there!
Darf ich im Stylesheet in dieser Form notieren
elem#id.class?Warum nicht einfach
#id? Warum willst du die Spezifität eines Selektors erhöhen, der dir schon genau ein Element auswählt?(Es darf ja nur ein Element mit der ID 'id' geben.)
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo Gunnar,
(Es darf ja nur ein Element mit der ID 'id' geben.)
In einem Dokument, ja - die ID darf aber in mehreren Dokumenten (für die die gleiche CSS-Datei gilt) für verschiedene Elemente verwendet werden ...
Grüße aus Nürnberg
Tobias -
Hallo Gunnar,
Warum nicht einfach
#id? Warum willst du die Spezifität eines Selektors erhöhen, der dir schon genau ein Element auswählt?Mit DHTML kann ich mir durchaus Anwendungen vorstellen, bei denen es einen Sinn ergeben kann, einem Element mit einer ID nachträglich abweichende Eigenschaften über eine Änderung von
classNamezuzuweisen. Damit das wirksam wird, brauche ich dann ja eine mindestens gleichwertige Spezifität wie jene des ID-Selektors.Gruß Gernot
-
Hallo Gernot.
Mit DHTML kann ich mir durchaus Anwendungen vorstellen, bei denen es einen Sinn ergeben kann, einem Element mit einer ID nachträglich abweichende Eigenschaften über eine Änderung von
classNamezuzuweisen. Damit das wirksam wird, brauche ich dann ja eine mindestens gleichwertige Spezifität wie jene des ID-Selektors.Full ACK, genau dasselbe dachte ich mir vor wenigen Minuten ebenfalls und es erwies sich als brauchbar.
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/ -
Hallö ins Forum,
Mit DHTML kann ich mir durchaus Anwendungen vorstellen, bei denen es einen Sinn ergeben kann, einem Element mit einer ID nachträglich abweichende Eigenschaften über eine Änderung von
classNamezuzuweisen.Jo. Genau daher kam meine Überlegung. Der M$IE wollte es mal wieder anders ;-)
Grüße aus Leipzig
willie
-
-