Der Martin: CSS-Rätsel zum Wochenende

Beitrag lesen

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 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