:not() pseudo class with compound selector

by Konstantin Rouda

HTML

<p class="c-test">He was more unlike himself than I could have
supposed possible.</p>

<article>
  <p class="c-paragraph c-text">
    ‘It would be better to be this poor Peggotty, or his lout of
a nephew,’ he said, getting up and leaning moodily against
the chimney-piece, with his face towards the fire
  </p>
</article>

CSS

/*Actual Style*/
ARTICLE {
  border: 1px solid hotpink;
}

P:not(.c-paragraph, .c-text) {
  color: blue;
}
/*END ACTUAL STYLE*/





















































HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(254, 255, 255);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

JavaScript

/*
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
NOTE: in this documentation description states that: "Using two selectors at the same time will not work. For example, :not(.foo,bar) is invalid. Instead, :not(.foo):not(.bar) should be used."
It's no longer trueas
*/