Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is the <p> element green? [duplicate]

I was looking at this CSS example from the Mozilla page for the :not() selector.

The example is:

p:not(.classy) { color: red; }  :not(p) { color: green; }
<p>Irgendein Text.</p>  <p class="classy">Irgendein anderer Text.</p>  <span>Noch mehr Text<span>

What I totally understand:

  • I get why the first p element is red, it's because it is a p element and it does not have the class 'classy'.
  • I also get why the span element is green, it's because it's selected by the :not(p), it is not a p element

But why is the second p element green? It would not be selected by the first selector, because it is a p element without the class classy. But it would not be selected by the second one, because it is a p element. So why is it green?

like image 477
Kevin de Goede Avatar asked Apr 12 '18 09:04

Kevin de Goede


People also ask

What is the significance of P-element in Drosophila transformation?

In Drosophila melanogaster, the P transposable element has become particularly valuable because it moves with high frequency and can mediate germ line transformation (1) and because its transposition can be controlled by limiting the availability of transposase (2, 3).

What are the characteristics of P elements in Drosophila?

P elements are transposable elements that were discovered in Drosophila as the causative agents of genetic traits called hybrid dysgenesis. The transposon is responsible for the P trait of the P element and it is found only in wild flies. They are also found in many other eukaryotes.

What is the mechanism that keeps the P-element from jumping in somatic tissues?

What is the mechanism that keeps the P-element from jumping in somatic tissues? Direct methylation of the P element in both P strains by DNMT1 inactivates P element.


1 Answers

The second p isn't :not(.classy) so it isn't color: red. This means it still has its default colour, which is color: inherit.

The body element is :not(p) so it is color: green.

The second p therefore inherits the green colour from the body element.

The developer tools in your browser would have told you this:

Developer tools showing CSS rules applied to the second paragraph as described above

like image 180
Quentin Avatar answered Oct 16 '22 02:10

Quentin