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.

Id selectors (i.e. div#idname) have higher specificity then attribute selectors (i.e. div[~=idname]) which is an important law in the terms of cascade and style inheritance.

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.

Example

CSS attributes 'id' and 'class' selectors:

 

›› go to examples ››