Welcome! Cheat it all the way!

CSS Selectors

Selector Names Description Example
CSS Type Selector CSS type selectors are used to match all elements of a given type or tag name. Unlike for HTML syntax, we do not include the angle brackets when using type selectors for tag names. When using type selectors, elements are matched regardless of their nesting level in the HTML.
Group Selector Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the text for both h1 and h2 is set to red.
Class and ID Selectors CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period . followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name.
Chaining Selector CSS selectors can be chained so that rule sets apply only to elements that match all criteria. For instance, to select h3 elements that also have the section-heading class, the selector h3.section-heading can be used.
CSS descendant Selector The CSS descendant selector combinator is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML.

CSS Specificity

(1 = the highest ranking, 5 = the lowest ranking)

Selector Types Example Priority Ranking
!important declarations (!important) (overrides all other rules) 1
Inline styles (e.g., style="color: red;" in HTML) 2
ID selectors (e.g., #heading) 3
Class selectors (e.g., .class-name) 4
Type selectors (e.g., div, p, table) 5