Cascading Style Sheets (CSS) are an important way to control how your web pages look. CSS controls the fonts, text, colors, backgrounds, margins, and layout. CSS offers several significant advantages over alternative approaches to web design.
| Basic Selectors | |||||
|---|---|---|---|---|---|
| Universal selector | Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. | Syntax: | * ns|* *|* | Example: | * will match all the elements of the document. |
| Type selector | Selects all elements that have the given node name. | Syntax: | elementname | Example: | input will match any <input> element. |
| Class selector | Selects all elements that have the given class attribute. | Syntax: | .classname | Example: | .index will match any element that has a class of "index". |
| ID selector | Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. | Syntax: | #idname | Example: | #toc will match the element that has the ID "toc". |
| Attribute selector | Selects all elements that have the given attribute. | Syntax: | [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] | Example: | [autoplay] will match all elements that have the autoplay attribute set (to any value). |
| Specificity | |||
|---|---|---|---|
| The following list of selector types increases by specificity | |||
| Universal selector (*) | Have no effect on specificity | ||
| Combinators (+, >, ~, ' ', ||) | |||
| Negation pseudo-class (:not()) | |||
| Type selectors | (e.g., h1) and pseudo-elements (e.g., ::before). | ||
| Class selectors | (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). | ||
| ID selectors | (e.g., #example). | ||
| The !important exception | This declaration overrides any other declarations. More details here | ||