| 1 | .class | .intro | Selects all elements with class="intro" | |
| 2 | .class1.class2 | .name1.name2 | Selects all elements with both name1 and name2 set within its class attribute | |
| 3 | .class1 .class2 | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 | |
| 4 | #id | #firstname | Selects the element with id="firstname" | |
| 5 | * | * | Selects all elements | |
| 6 | Element | p | Selects all <p> elements | |
| 7 | Element.class | p.intro | Selects all <p> elements with class="intro" | |
| 8 | Element,element | div, p | Selects all <div> elements and all <p> elements | |
| 9 | Element element | div p | Selects all <p> elements inside <div> elements | |
| 10 | Element>element | div > p | Selects all <p> elements where the parent is a <div> element | |
| 11 | Element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements | |
| 12 | Element1~element2 | p ~ ul | Selects every <ul> element that is preceded by a <p> element | |
| 13 | [attribute] | [target] | Selects all elements with a target attribute | |
| 14 | [attribute=value] | [target=_blank] | Selects all elements with target="_blank" | |
| 15 | [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" | |
| 16 | [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" | |
| 17 | [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" | |
| 18 | [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" | |
| 19 | [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" | |
| 20 | :active | a:active | Selects the active link | |
| 21 | ::after | p::after | Insert something after the content of each <p> element | |
| 22 | ::before | p::before | Insert something before the content of each <p> element | |
| 23 | :checked | input:checked | Selects every checked <input> element | |
| 24 | :default | input:default | Selects the default <input> element | |
| 25 | :disabled | input:disabled | Selects every disabled <input> element | |
| 26 | :empty | p:empty | Selects every <p> element that has no children (including text nodes) | |
| 27 | :enabled | input:enabled | Selects every enabled <input> element | |
| 28 | :first-child | p:first-child | Selects every <p> element that is the first child of its parent | |
| 29 | ::first-letter | p::first-letter | Selects the first letter of every <p> element | |
| 30 | ::first-line | p::first-line | Selects the first line of every <p> element | |
| 31 | :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent | |
| 32 | :focus | input:focus | Selects the input element which has focus | |
| 33 | :fullscreen | :fullscreen | Selects the element that is in full-screen mode | |
| 34 | :hover | a:hover | Selects links on mouse over | |
| 35 | :in-range | input:in-range | Selects input elements with a value within a specified range | |
| 36 | :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state | |
| 37 | :invalid | input:invalid | Selects all input elements with an invalid value | |
| 38 | :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) | |
| 39 | :last-child | p:last-child | Selects every <p> element that is the last child of its parent | |
| 40 | :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent | |
| 41 | :link | a:link | Selects all unvisited links | |
| 42 | ::marker | ::marker | Selects the markers of list items | |
| 43 | :not(selector) | :not(p) | Selects every element that is not a <p> element | |
| 44 | :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent | |
| 45 | :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child | |
| 46 | :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child | |
| 47 | :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent | |
| 48 | :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent | |
| 49 | :only-child | p:only-child | Selects every <p> element that is the only child of its parent | |
| 50 | :optional | input:optional | Selects input elements with no "required" attribute | |
| 51 | :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range | |
| 52 | ::placeholder | input::placeholder | Selects input elements with the "placeholder" attribute specified | |
| 53 | :read-only | input:read-only | Selects input elements with the "readonly" attribute specified | |
| 54 | :read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified | |
| 55 | :required | input:required | Selects input elements with the "required" attribute specified | |
| 56 | :root | :root | Selects the document's root element | |
| 57 | ::selection | ::selection | Selects the portion of an element that is selected by a user | |
| 58 | :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | |
| 59 | :valid | input:valid | Selects all input elements with a valid value | |
| 60 | :visited | a:visited | Selects all visited links | |
| 61 | Attr() | attr(href) | Returns the value of an attribute of the selected element | |
| 62 | Calc() | width: calc(100% - 20px); | Allows you to perform calculations to determine CSS property values | |
| 63 | Cubic-bezier() | transition: width 0.2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); | Defines a Cubic Bezier curve | |
| 64 | Hsl() | background-color:hsl(120,100%,50%); | Defines colors using the Hue-Saturation-Lightness model (HSL) | |
| 65 | Hsla() | background-color:hsla(290,100%,50%,0.3);} | Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA) | |
| 66 | Linear-gradient() | background-image: linear-gradient(red, yellow, blue); | Sets a linear gradient as the background image. Define at least two colors (top to bottom) | |
| 67 | Radial-gradient() | background-image: radial-gradient(red, green, blue); | Sets a radial gradient as the background image. Define at least two colors (center to edges) | |
| 68 | Repeating-linear-gradient() | background-image: repeating-linear-gradient(red 10%, yellow 10%, green 20%); | Repeats a linear gradient | |
| 69 | Repeating-radial-gradient() | background-image: repeating-radial-gradient(red, yellow 10%, green 15%); | Repeats a radial gradient | |
| 70 | Rgb() | background-color:rgb(0,255,0); | Defines colors using the Red-Green-Blue model (RGB) | |
| 71 | Rgba() | background-color:rgba(255,0,0,0.3); | Defines colors using the Red-Green-Blue-Alpha model (RGBA) | |
| 72 | Var() | :root {--main-bg-color: orange;} #div1 {background-color: var(--main-bg-color);} | Inserts the value of a custom property | |
| 73 | Arial (sans-serif) | font-family: Arial, sans-serif; | | |
| 74 | Verdana (sans-serif) | font-family: Verdana, sans-serif; | | |
| 75 | Helvetica (sans-serif) | font-family: Helvetica, sans-serif; | | |
| 76 | Tahoma (sans-serif) | font-family: Tahoma, sans-serif; | | |
| 77 | Trebuchet MS (sans-serif) | font-family: 'Trebuchet MS', sans-serif; | | |
| 78 | Times New Roman (serif) | font-family: 'Times New Roman', serif; | | |
| 79 | Georgia (serif) | font-family: Georgia, serif; | | |
| 80 | Garamond (serif) | font-family: Garamond, serif; | | |
| 81 | Courier New (monospace) | font-family: 'Courier New', monospace; | | |
| 82 | Brush Script MT (cursive) | font-family: 'Brush Script MT', cursive; | | |
| 83 | @keyframes | @keyframes mymove {from {background-color: red;}to {background-color: blue;}} | #myDIV {animation: mymove 5s infinite;} | |