Universal selector and inheritance

Hi Bilal,

I think what Guil was saying is that you lose inheritance when you use the universal selector.

Imagine you have the following html:

<p>This is a paragraph <span>with a span in it</span></p>

Now if you were to set the color of the paragraph to blue like this: p { color: blue; } then the span text would also be blue because it would inherit that blue color from it's parent.

Let's say before doing that you use the universal selector to set the color to red then you set the paragraph color to blue..

* {
  color: red;
}
p {
  color: blue;
}

The text inside the paragraph before the span will turn blue but the span will remain red. It will no longer inherit the color from the paragraph because the span color has been set to red using the universal selector.

You can once again make the span inherit the color from it's parent by using the inherit value.

* {
  color: red;
}
p {
  color: blue;
}

span {
  color: inherit;
}

Now the span would go back to being blue because it will inherit from it's parent which is blue. Setting color: inherit on the span will override the red color that was set on the span using the universal selector.