nicht angemeldet
CSS-Rätsel zum Wochenende
0 
Der Martin
0 0 
MudGuard
0
0 MudGuard
0 
Gunnar Bittersmann
0 
Matthias Apsel
0 1 Tabellenkalk
0 Gunnar Bittersmann
CSS-Rätsel zum Wochenende
marctrixHallo,
auf Twitter hat Peter Kröner gerade ein interessantes CSS-Rätsel gestellt. Ich dache, ich teile es mal mit euch. Gegeben sei folgender Code:
p.foo:not(#baz) {
color: yellow;
}
p.foo:not(.bar) {
color: blue;
}
p.foo:not(p#foo) {
color: magenta;
}
p.foo {
color: green;
}
.foo {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bar</title>
</head>
<body>
<p class="foo">A</p>
</body>
</html>
Welche Farbe hat das p und warum? Und nachlesen ist schummeln! ;-)
LG,
CK
-
Hi,
p.foo:not(#baz) { color: yellow; } p.foo:not(.bar) { color: blue; } p.foo:not(p#foo) { color: magenta; } p.foo { color: green; } .foo { color: red; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bar</title> </head> <body> <p class="foo">A</p> </body> </html>Welche Farbe hat das
pund warum? Und nachlesen ist schummeln! ;-)ich habe weder nachgelesen noch ausprobiert, daher meine theoretisch hergeleitete Lösung: Das p-Element muss magenta als Schriftfarbe haben. Voraussetzung dafür ist natürlich, dass das abgebildete Stylesheet überhaupt eingebunden wird, was ich aus den Code-Fragmenten aber nicht erkennen kann.
Grund: Die Selektoren p.foo:not(#baz), p.foo:not(.bar) und p.foo:not(p#foo) haben alle die gleiche Spezifizität (Element, Klasse und Pseudoklasse), der Inhalt der :not-Klammer zählt hier AFAIK nicht. Ergo gewinnt die letzte dieser drei Regeln.
Die nachfolgenden p.foo und .foo sind weniger spezifisch, fallen also sowieso unter den Tisch.Und, habe ich jetzt was gewonnen? Vielleicht eine Baggerfahrt durch die Eifel? :-)
So long,
Martin-
Hallo Martin,
ich habe weder nachgelesen noch ausprobiert, daher meine theoretisch hergeleitete Lösung: Das p-Element muss magenta als Schriftfarbe haben. Voraussetzung dafür ist natürlich, dass das abgebildete Stylesheet überhaupt eingebunden wird, was ich aus den Code-Fragmenten aber nicht erkennen kann.
Natürlich wird das eingebunden, sonst wäre es ja witzlos. Die Antwort Magenta ist teilweise richtig ;-)
Grund: Die Selektoren p.foo:not(#baz), p.foo:not(.bar) und p.foo:not(p#foo) haben alle die gleiche Spezifizität (Element, Klasse und Pseudoklasse), der Inhalt der :not-Klammer zählt hier AFAIK nicht. Ergo gewinnt die letzte dieser drei Regeln.
Das ist leider nicht richtig.
:not()erhält die Spezifizität des Arguments.Die nachfolgenden p.foo und .foo sind weniger spezifisch, fallen also sowieso unter den Tisch.
Das wiederum ist richtig.
Soll ich auflösen? ;-)
LG,
CK-
Hi,
Natürlich wird das eingebunden, sonst wäre es ja witzlos.
Das hätte aber auch gerade der Witz sein können - jeder stürzt sich auf die Specificity, und beachtet nicht, daß das Stylesheet gar nicht relevant ist.
Die Antwort Magenta ist teilweise richtig ;-)
Grund: Die Selektoren p.foo:not(#baz), p.foo:not(.bar) und p.foo:not(p#foo) haben alle die gleiche Spezifizität (Element, Klasse und Pseudoklasse), der Inhalt der :not-Klammer zählt hier AFAIK nicht. Ergo gewinnt die letzte dieser drei Regeln.
Das ist leider nicht richtig.
:not()erhält die Spezifizität des Arguments.Wenn das Stylesheet eingebunden wäre, würde magenta rauskommen, weil das der Selektor mit der höchsten Specificity ist.
cu,
Andreas a/k/a MudGuard-
@@MudGuard
Wenn das Stylesheet eingebunden wäre, würde magenta rauskommen
Der Erklärbär hat mit Bedacht
<p class="foo">A</p>gewählt und nicht<p class="foo">T</p>, was immer magenta wär. ;-)weil das der Selektor mit der höchsten Specificity ist.
Das ist ein Spiel, wo man herausfinden muss, wie man ins nächste Level kommt. 😄
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
Hallo MudGuard,
Wenn das Stylesheet eingebunden wäre, würde magenta rauskommen, weil das der Selektor mit der höchsten Specificity ist.
Ich löse mal auf. Ich hatte auch auf Magenta getippt. Es kommt aber darauf an, was der Browser kann. In der Spec heisst es, dass in Level 3 nur Simple Selectors erlaubt sind.
p#fooist aber keiner. Deshalb wird in Level 3 der Selektor ignoriert und das A wird gelb::not(#baz)hat dann die höchste Spezifität, sichtbar in Firefox und Chrome. Der Safari kann allerdings schon Level 4, und dort ist das A tatsächlich auch Magenta, weilp#foodann die höchste Spezifität hat. Beides ist allerdings korrekt ;-)LG,
CK-
@@Christian Kruse
Ich löse mal auf. … Beides ist allerdings korrekt ;-)
„Aber mal ehrlich: dass es auf den Browser ankommt, hättet ihr euch eigentlich schon denken können, oder? Webentwicklung, Baby!“ —@sir_pepe
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
Hallo zusammen,
seid ihr Flaschen endlich drauf gekommen? ;-)
SCNR...
Aber im Ernst: gut gemacht. Schön, wieder was gelernt zu haben. Dass mit Level4 im :not-Selector mehr geht, war mir noch gar nicht bewusst. Und dass gerade der Safari das schon kann: Respekt!
Schönes wochenende (falls wir uns nicht sowieso die ganze Zeit lesen)...
-
-
-
-
Tach,
Grund: Die Selektoren p.foo:not(#baz), p.foo:not(.bar) und p.foo:not(p#foo) haben alle die gleiche Spezifizität (Element, Klasse und Pseudoklasse), der Inhalt der :not-Klammer zählt hier AFAIK nicht. Ergo gewinnt die letzte dieser drei Regeln.
ne, beim not-Selektor ist es genau anders; das not wird ignoriert und der Inhalt in der Klammer genauso gewertet, wie er normal gewertet würde und deswegen gewinnt magenta.
mfg
Woodfighter-
@@woodfighter
und deswegen gewinnt magenta.
Njein.
(Ich hab aber auch geschummelt.)
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-
-
Hi,
p.foo:not(#baz) { color: yellow; } p.foo:not(.bar) { color: blue; } p.foo:not(p#foo) { color: magenta; } p.foo { color: green; } .foo { color: red; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bar</title> </head> <body> <p class="foo">A</p> </body> </html>Die im Browser eingestellte Default-Schriftfarbe.
Begründung: ins gezeigte HTML-Dokument wird kein Stylesheet eingebunden.
cu,
Andreas a/k/a MudGuard -
@@Christian Kruse
Welche Farbe hat das
pund warum? Und nachlesen ist schummeln! ;-)Wie mein geschätzter Kollege sagte: „natürlich gew…ausprobiert ;)“
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
Hallo Christian Kruse,
Welche Farbe hat das
pund warum? Und nachlesen ist schummeln! ;-)Meine Reihenfolge war:
- Antworten lesen
- nachdenken
Dadurch kommt man schon mal auf den richtigen Weg. Der Selektor mit dem magenta muss ungültig sein, denn anderenfalls würde er gewinnen.
- ausprobieren
Also ungültig, aber warum?
Der Unterschied zwischen den 3 ‚:not‘-Selektoren ist, dass der magenta-Selektor als ‚:not‘-Argument einen zusammengesetzten Selektor enthält. Das darf nicht sein.Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Hallo Matthias,
Also ungültig, aber warum?
Der Unterschied zwischen den 3 ‚:not‘-Selektoren ist, dass der magenta-Selektor als ‚:not‘-Argument einen zusammengesetzten Selektor enthält. Das darf nicht sein.LG,
CK
-
Die einzige richtige Antwort lautet natürlich: Das p – jedes p in den Code-Blöcken des Fragetextes – hat die Farbe grün, weil der Syntax-Highlighter dieses Forums das offenbar so darstellt. (Das A ist übrigens blau.)
-
Hallo,
Welche Farbe hat das
pund warum?Es muss natürlich blau sein, da durch das „not“ die Spezifitätsreihenfolge in den Argumenten negiert wird....
Gruß
Kalk-
Hallo Tabellenkalk,
Welche Farbe hat das
pund warum?Es muss natürlich blau sein, da durch das „not“ die Spezifitätsreihenfolge in den Argumenten negiert wird....
I lol'ed iRL ;-)
LG,
CK
-
-
@@Christian Kruse
auf Twitter hat Peter Kröner gerade ein interessantes CSS-Rätsel gestellt.
Der Erklärbär hat sein kleines CSS-Rätsel (mit Auflösung) gebloggt.
„Eigentlich klarer Sieg für das Team Magenta“ – aber die waren gedopt. ;-) 🚴+💉=🏆
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)