Class and id attributes are used as a special identification for a HMTL element or elements. As such CSS rules predict that they may create a special selector group suffixed by "." in cases of classes and "#" in case of ids.
Therefore addressing a class attribute selector with element.classname equals element[class~=classname] (same principle for id attributes).
Important rule about the id attributes is that only one element in a document tree may be named a certain id name and that makes id attributes special.
The advantage of using class attributes selectors over a simple element based selectors is that a class may be assigned to different elements that are not related together; let say div, a and li are all allowed to share same class which styles them, for instance, with same font family and color.
CSS attributes 'id' and 'class' selectors: