Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:
- Inline styles (Presence of style in document)- An inline style is within the XHTML document. It is attached directly to the element to be styled. like <h1 style=”color: #fff;”>.
- IDs (# of ID selectors) – ID is an identifier for web page elements like #div.
- Classes, attributes and pseudo-classes – This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
- Elements and pseudo-elements – Including elements like :before and :after.