Pseudoclass :not() does not work with combinator

Asked

Viewed 802 times

1

I have this code html:

<article>
  <p class="ola"> cafe </p>
  <p>Primeiro parágrafo</p>
  <p>Segundo parágrafo</p>
  <aside>
    <h1>Informações</h1>
    <p>No way</p>
  </aside>
  <p>Terceiro parágrafo</p>
</article>

And this CSS:

article:not(.ola) p {
background-color: rgb(222, 111, 55);
color: rgb(66, 255, 44);
}

Fiddle.

For me, the class paragraph ola should be ignored because of the use of :not() (thus, cafe should be without style). But, it was also stylized. I don’t understand why of it. Maybe it’s because I’m using the descending combinator together, but I couldn’t identify the problem.

1 answer

1


This result was because you reversed the order, if you want the p without the styles then it is the same that should receive the not(), can read more about this pseudo-classe here:

article p:not(.ola) {
  background-color: rgb(222, 111, 55);
  color: rgb(66, 255, 44);
}
<article>
  <p class="ola"> cafe </p>
  <p>Primeiro parágrafo</p>
  <p>Segundo parágrafo</p>
  <aside>
    <h1>Informações</h1>
    <p>No way</p>
  </aside>
  <p>Terceiro parágrafo</p>
</article>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.