CSS3 Selectors

CSS works by defining the styles of the elements on a Web page using CSS rules. Rules are applied using selectors, which come in three basic varieties:

• HTML selectors are used to reference a specific tag; 
• Class selectors, which are applied individually to elements; 
• An ID selector that is applied to a single element on the page. 

You will use these three basic selectors constantly, and they are the best place to start.

Here is a list of CSS3 Selectors:

• :root - is the top level element in a document Compatibility: FF1.5, O9.5, S3.1,C3
• :empty - has no children Compatibility: FF1.5, O9.5, S3.1,C3
• :only-child - has no siblings Compatibility: FF1.5, O9.5, S3.1,C3
• :only-of-type - has its unique selector among its siblings Compatibility: FF1.5, O9.5, S3.1, C3
• :nth-of-type(n) - is the nth element with that selector Compatibility: FF1.5, O9.5, S3.1,C3
• :nth-last-of-type(n) - is the nth element with that selector from the last element with that selector Compatibility: FF1.5, O9.5, S3.1, C3
• :last-child - is the last child in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :first-of-type - is the first of its selector type in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :last-of-type - is the last of its selector type in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :not(s) - is not using specific selectors Compatibility: FF1.5, O9.5, S3.1, C3
• [attr^="value"] - Begins with has specified attribute equal to exact value at beginning
• [attr$="value"] - Ends With has specified attribute equal to exact value at end
• [attr*="value"] - Contains has specified attribute equal to exact value anywhere

Here are examples:

• Alice
• The White Rabbit
• The Mad Hatter
• The Queen of Hearts
• The Door Mouse