Christian Kruse: CSS-Rätsel zum Wochenende

Beitrag lesen

Hallo,

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