Learn CSS So That Your Site Doesn’t Look Like Garbage
=====================================================
CSS Selectors
------------------------------------------------------------------------
### Learn CSS So That Your Site Doesn’t Look Like Garbage
### CSS Selectors
- `CSS Selector` : Applies styles to a specific DOM element(s), there are various types:
- `Type Selectors` : Matches by node name.
- `Class Selectors` : Matches by class name.
- `ID Selectors` : Matches by ID name.
- `Universal Selectors` : Selects all HTML elements on a page.
- `Attribute Selectors` : Matches elements based on the prescence or value of a given attribute. (i.e. a\[title\] will match all a elements with a title attribute)
/* Type selector */
div {
background-color: #000000;
}/* Class selector */
.active {
color: #ffffff;
}/* ID selector */
#list-1 {
border: 1px solid gray;
}/* Universal selector */
* {
padding: 10px;
}/* Attribute selector */
a[title] {
font-size: 2em;
}
**Class Selectors**
- Used to select all elements of a certain class denoted with a `.[class name]`
- You can assign multiple classes to a DOM element by separating them with a space.
**Compound Class Selectors**
- To get around accidentally selecting elements with multiple classes beyond what we want to grab we can chain dots.
- TO use a compound class selector just append the classes together when referencing them in the CSS.
- i.e. .box.yellow will select only the first element.
- KEEP IN MIND that if you do include a space it will make the selector into a *descendant selector*.
h1#heading,
h2.subheading {
font-style: italic;
}
- When we want to target all `h1` tags with the id of `heading`.
**CSS Combinators**
- CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful!
- Be careful not to use too many of them as they will make your CSS far too complex.
- `Descendant Selectors`
- Separated by a space.
- Selects all descendants of a parent container.
- `Direct Child Selectors`
- Indicated with a `>`.
- Different from descendants because it only affects the direct children of an element.
- `.menu > .is-active { background-color: #ffe0b2; }`
- ` Laika
`
-