CSS-Rätsel zum Wochenende bearbeitet von Der Martin 06.11.2015 11:15 Hi, > ~~~ css > 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; > } > ~~~ > > ~~~ html > <!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! ;-) 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
CSS-Rätsel zum Wochenende bearbeitet von Der Martin 06.11.2015 11:17 Hi, > ~~~ css > 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; > } > ~~~ > > ~~~ html > <!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! ;-) 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. So long, Martin
nicht angemeldet nicht angemeldet
