- * { }
- Uses the html name as selector
- Ex: body
Id selectors:
- Can target an element based on an id attribute
- #primary-content (matches html attribute with that id)
- In html: <div id="primary-content">
- An element can only have one ID (the div above can only have one)
- A page can only have one element with the same ID name in a given html file
- Once an id name is used, it cannot be used anywhere else.
- Carry more weight than class—styles in id selector take precedence over those defined in class
Class selectora
The difference between class and id selectors is that IDs are unique to one element, but classes can be used to target more than one element.
- Defined with .classname {}
- Only target elements with matching class selectors
- An element can have multiple classes assigned to it
- You are able to apply both a class and an ID to an element
Descendant selector
Targets an element that’s a descendent of another element
- Ex: targets a span tag within header
- Useful for targeting lists
ul li {
color: white;
background-color: tomato;
}
Pseudo classes:
- Special keywords added to selectors
- Link history pseudo-classes style links that have or haven’t been clicked
- a:link, hover, focus, and active are examples
