In the first example, you are selecting an <em> that is a child of <span id="angry"> (note that the span MUST have this ID because you have span#angry) and THAT span is a child of an element with class=“loud”. Example below:
Note that this above example will not work for the 2nd CSS rule you have.
The second example is selecting an em that is a child of ANY ELEMENT that has the id=“angry”. This can be a span, OR IT CAN BE ANYTHING like a DIV or a TABLE or UL tag. Any sort of tag. Now, this id=“angry” element is a child of a <span> element, which is a child of a class=“loud” element. Example below:
With that space between span and #angry, that means that the HTML element has an id=“angry”. Without it, “span #angry” is talking about two different elements.
I found that example in some tutorials, since it is audio and i am not english native speaker i couldnt figure out what it is for weeks :). Now it is all clear , thnxxxxxx , I am so happy now .