diff --git a/css.md b/css.md index 162d28c5a..533aafdcf 100644 --- a/css.md +++ b/css.md @@ -13,6 +13,7 @@ keywords: --- ## Basics + {: .-three-column} ### Selectors @@ -22,15 +23,17 @@ keywords: font-weight: bold; } ``` + {: .-setup} -| Selector | Description | -| ----------------- | ----------- | -| `div` | Element | -| `.class` | Class | -| `#id` | ID | -| `[disabled]` | Attribute | -| `[role="dialog"]` | Attribute | +| Selector | Description | +| ----------------- | ------------ | +| `*` | All Elements | +| `div` | Element | +| `.class` | Class | +| `#id` | ID | +| `[disabled]` | Attribute | +| `[role="dialog"]` | Attribute | ### Combinators @@ -40,6 +43,7 @@ keywords: | `.parent > .child` | Direct descendant | | `.child + .sibling` | Adjacent sibling | | `.child ~ .sibling` | Far sibling | +| `.class.class` | Have both class | ### Attribute selectors @@ -54,21 +58,26 @@ keywords: ### Pseudo-classes -| Selector | Description | -| -------------------- | ------------------------ | -| `:target` | eg, `h2#foo:target` | -| --- | --- | -| `:disabled` | | -| `:focus` | | -| `:active` | | -| --- | --- | -| `:nth-child(3)` | 3rd child | -| `:nth-child(3n+2)` | 2nd child in groups of 3 | -| `:nth-child(-n+4)` | | -| --- | --- | -| `:nth-last-child(2)` | | -| `:nth-of-type(2)` | | -| --- | --- | +| Selector | Description | +| -------------------- | ------------------------------------------ | +| `:target` | eg, `h2#foo:target` | +| --- | --- | +| `:disabled` | | +| `:focus` | | +| `:active` | | +| --- | --- | +| `:nth-child(3)` | 3rd child | +| `:nth-child(3n+2)` | 2nd child in groups of 3 | +| `:nth-child(-n+4)` | | +| --- | --- | +| `:nth-last-child(2)` | | +| `:nth-of-type(2)` | | +| --- | --- | +| `:checked` | Selects every checked element | +| `:disabled` | Selects every disabled element | +| `:default` | Selects the default element | +| --- | --- | +| `:empty` | Selects every element that has no children | ### Pseudo-class variations @@ -83,9 +92,11 @@ keywords: | `:last-child` | | `:nth-child(2)` | | `:only-child` | + {: .-left-align} ## Fonts + {: .-left-reference} ### Properties @@ -103,15 +114,18 @@ keywords: | --- | --- | | `text-align:` | `left` `right` `center` `justify` | | `text-transform:` | `capitalize` `uppercase` `lowercase` | + {: .-key-values} ### Shorthand + {: .-prime} | | style | weight | size (required) | | line-height | family | | ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- | | `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` | | | style | weight | size (required) | | line-height | family (required) | + {: .-css-breakdown} ### Example @@ -133,6 +147,7 @@ text-transform: lowercase; /* hello */ ``` ## Background + {: .-left-reference} ### Properties @@ -148,6 +163,7 @@ text-transform: lowercase; /* hello */ | `background-clip:` | `border-box` `padding-box` `content-box` | | `background-repeat:` | `no-repeat` `repeat-x` `repeat-y` | | `background-attachment:` | `scroll` `fixed` `local` | + {: .-key-values} ### Shorthand @@ -157,6 +173,7 @@ text-transform: lowercase; /* hello */ | `background:` | `#ff0` | `url(bg.jpg)` | `left` | `top` | `/` | `100px` `auto` | `no-repeat` | `fixed;` | | `background:` | `#abc` | `url(bg.png)` | `center` | `center` | `/` | `cover` | `repeat-x` | `local;` | | | color | image | positionX | positionY | | size | repeat | attachment | + {: .-css-breakdown} ### Multiple backgrounds @@ -167,6 +184,7 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ``` ## Animation + {: .-left-reference} ### Properties @@ -182,6 +200,7 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), | `animation-direction:` | `normal` `reverse` `alternate` `alternate-reverse` | | `animation-fill-mode:` | `none` `forwards` `backwards` `both` `initial` `inherit` | | `animation-play-state:` | `normal` `reverse` `alternate` `alternate-reverse` | + {: .-key-values} ### Shorthand @@ -190,6 +209,7 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), | ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- | --------- | ---------- | | `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` | `both` | `reverse` | | | name | duration | timing-function | delay | count | direction | fill-mode | play-state | + {: .-css-breakdown} ### Example