Why the below two codes shows different styles ?

Question

First code is #intro .p em{ color:red;} . Second code is #intro.p em{color:red;}

Answer 1

The first code is for element #intro with child p class, sub-child em tag.

eg. it would select "selected" from below HTML

<div id="intro"><div class="p">This is <em>selected<\em><\div><\div>

The second is for
<div id="intro" class="p"><em>selected<\em><\div>

Answer 2

Calviղ You're right. I always get spaces and commas mixed up. Thanks.

Answer 3

The first one applies to any element with the id "intro", the #intros child class "p", and the .ps child em element.
The second applies to any element with the id "intro" AND class "p", and the em tag.

Answer 4

Ben Allen (Njinx)
The css selector that select any element with id "intro", class .p and em element is
$intro, .p, em { }

Answer 5

Rose Sevenyears Yes, there is the common way developers use to addrees an element.

Answer 6

Calviղ And maybe others?

Isn't it possible to do :

<p class="p" ></p>

?