| Tag | Selector Name | Description |
|---|---|---|
p { } |
Type | The type selector matches the type of the element in the HTML document |
* { } |
Universal | The universal selector selects all elements of any type. |
.class { } |
Class | A class attribute is one of the most common ways to select an element. |
#id { } |
ID | To select a single element with CSS to give it its own unique style |
[attribute] { } |
Attribute | The attribute selector can be used to target HTML elements that already contain attributes |
selector:psuedo-class { } |
Pseudo-class | The appearance of certain elements can change, or be in a different state, after certain user interactions. For instance:
When you click on an <input> element, and a blue border is added showing that it is in focus. When you click on a blue<a> link to visit to another page, but when you return the link’s text is purple. When you’re filling out a form and the submit button is grayed out and disabled. But when all of the fields have been filled out, the button has color showing that it’s active. |
| Example | Rule/Tip Name | Rule/Tip Description |
|---|---|---|
| NA | Classes and IDs | While classes are meant to be used many times, an ID is meant to style only one element |
| NA | Specificity | IDs are the most specific selector in CSS, followed by classes, and finally, type. |
selector.class { } |
Chaining | When writing CSS rules, it’s possible to require an HTML element to have two or more CSS selectors at the same time. This is done by combining multiple selectors |
.class li { } |
Descendant Combinator | CSS also supports selecting elements that are nested within other HTML elements |
.class selector { } |
Chaining and Specificity | Adding more than one tag, class, or ID to a CSS selector increases the specificity of the CSS selector |
selector, #id { } |
Multiple Selectors | In order to make CSS more concise, it’s possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code. |