Why the selectors for <p> are being used in the CSS example for font sizing?

Question

Being new to this whole thing, I realized that the CSS editor shows the redundancy error message next to the selectors for <p>: such as:

p.small { font-family: Helvetica;
}
while the code executes properly in this case, the editor shows message (small triangle next to the said line of code) that the element p.small is overqualified due to class attached to it, so selecting the class only would suffice, such as here:

.small { font-family: Helvetica;
}

W̶h̶a̶t̶ ̶i̶s̶ ̶m̶o̶r̶e̶,̶ ̶i̶f̶ ̶y̶o̶u̶ ̶d̶e̶c̶i̶d̶e̶ ̶t̶o̶ ̶u̶s̶e̶ ̶t̶h̶e̶ ̶f̶u̶l̶l̶ ̶e̶l̶e̶m̶e̶n̶t̶,̶ ̶i̶n̶v̶o̶k̶i̶n̶g̶ ̶n̶o̶t̶ ̶o̶n̶l̶y̶ ̶c̶l̶a̶s̶s̶ ̶b̶u̶t̶ ̶a̶l̶s̶o̶ ̶<̶p̶>̶ ̶w̶h̶i̶l̶e̶ ̶a̶l̶l̶ ̶t̶h̶e̶ ̶p̶a̶r̶a̶g̶r̶a̶p̶h̶s̶ ̶a̶r̶e̶ ̶e̶n̶c̶o̶m̶p̶a̶s̶s̶e̶d̶ ̶b̶y̶ ̶<̶b̶o̶d̶y̶>̶,̶ ̶t̶h̶e̶n̶ ̶s̶t̶y̶l̶i̶n̶g̶ ̶t̶h̶e̶ ̶b̶o̶d̶y̶'̶s̶ ̶c̶o̶l̶o̶r̶ ̶a̶n̶d̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶w̶i̶l̶l̶ ̶o̶v̶e̶r̶r̶i̶d̶e̶ ̶t̶h̶e̶ ̶s̶a̶m̶e̶ ̶s̶t̶y̶l̶i̶n̶g̶ ̶s̶e̶t̶t̶i̶n̶g̶s̶ ̶f̶o̶r̶ ̶t̶h̶e̶ ̶p̶a̶r̶t̶i̶c̶u̶l̶a̶r̶ ̶p̶a̶r̶a̶g̶r̶a̶p̶h̶s̶.̶

EDIT: fixed the typo, also just checked again in the editor, and the above statement is not true.

Answer 1

The editor triangle warnings (in the code playground website version) are not necessarly blocking errors, but sometimes, as you've experimented, just warn... in this case, the fact that the css selector rule is over qualified isn't a problem: the parser/correcter doesn't analyze enough to know if such rule are really unnecessarly over qualified or if your code context need this ;)

Answer 2

You have typo mistake: after the property name you must use a colon (:) as separator from value and not a semi colon (;)... and you must end the value(s) with a semi-colon (as you do)