css
/* CSS Syntax and Selectors Cheatsheet */
/* Basic Syntax */
selector {
property: value;
}
/* Selectors */
/* 1. Element Selector */
element {
/* Styles applied to all <element> tags */
}
/* 2. Class Selector */
.class-name {
/* Styles applied to elements with class="class-name" */
}
/* 3. ID Selector */
#id-name {
/* Styles applied to the element with id="id-name" */
}
/* 4. Universal Selector */
* {
/* Styles applied to all elements */
}
/* 5. Attribute Selector */
[attribute] {
/* Styles applied to elements with the specified attribute */
}
[attribute="value"] {
/* Styles applied to elements with the specified attribute and value */
}
[attribute^="value"] {
/* Styles applied to elements with the specified attribute starting with "value" */
}
[attribute$="value"] {
/* Styles applied to elements with the specified attribute ending with "value" */
}
[attribute*="value"] {
/* Styles applied to elements with the specified attribute containing "value" */
}
/* 6. Pseudo-class Selector */
selector:pseudo-class {
/* Styles applied to elements in a specific state */
}
/* Examples of Pseudo-classes */
a:hover {
/* Styles applied when the mouse hovers over a link */
}
input:focus {
/* Styles applied when an input element is focused */
}
li:nth-child(2) {
/* Styles applied to the second <li> element */
}
/* 7. Pseudo-element Selector */
selector::pseudo-element {
/* Styles applied to a specific part of an element */
}
/* Examples of Pseudo-elements */
p::first-line {
/* Styles applied to the first line of a <p> element */
}
p::first-letter {
/* Styles applied to the first letter of a <p> element */
}
/* 8. Combinators */
/* Descendant Combinator */
parent child {
/* Styles applied to <child> elements inside <parent> */
}
/* Child Combinator */
parent > child {
/* Styles applied to <child> elements directly inside <parent> */
}
/* Adjacent Sibling Combinator */
element1 + element2 {
/* Styles applied to <element2> immediately after <element1> */
}
/* General Sibling Combinator */
element1 ~ element2 {
/* Styles applied to all <element2> elements after <element1> */
}
/* 9. Grouping Selectors */
selector1, selector2, selector3 {
/* Styles applied to all matching selectors */
}
/* 10. :not() Pseudo-class */
selector:not(exception) {
/* Styles applied to elements that do not match the exception */
}
/* Example */
p:not(.special) {
/* Styles applied to <p> elements without class="special" */
}
/* 11. :root Selector */
:root {
/* Styles applied to the document's root element (usually <html>) */
}
/* 12. :nth-child() Pseudo-class */
selector:nth-child(n) {
/* Styles applied to the nth child element */
}
/* Example */
li:nth-child(odd) {
/* Styles applied to odd <li> elements */
}
li:nth-child(even) {
/* Styles applied to even <li> elements */
}
li:nth-child(3n) {
/* Styles applied to every 3rd <li> element */
}
/* 13. :last-child Pseudo-class */
selector:last-child {
/* Styles applied to the last child element */
}
/* 14. :first-of-type Pseudo-class */
selector:first-of-type {
/* Styles applied to the first element of its type */
}
/* 15. :last-of-type Pseudo-class */
selector:last-of-type {
/* Styles applied to the last element of its type */
}
/* 16. :only-child Pseudo-class */
selector:only-child {
/* Styles applied to elements that are the only child */
}
/* 17. :only-of-type Pseudo-class */
selector:only-of-type {
/* Styles applied to elements that are the only one of their type */
}
/* 18. :empty Pseudo-class */
selector:empty {
/* Styles applied to elements with no children */
}
/* 19. :checked Pseudo-class */
input:checked {
/* Styles applied to checked input elements (e.g., checkboxes, radio buttons) */
}
/* 20. :disabled Pseudo-class */
input:disabled {
/* Styles applied to disabled input elements */
}
/* 21. :enabled Pseudo-class */
input:enabled {
/* Styles applied to enabled input elements */
}
/* 22. :target Pseudo-class */
:target {
/* Styles applied to the element targeted by the URL fragment */
}
/* 23. :lang() Pseudo-class */
selector:lang(language-code) {
/* Styles applied to elements with a specific language attribute */
}
/* Example */
p:lang(fr) {
/* Styles applied to <p> elements with lang="fr" */
}
/* 24. :is() Pseudo-class */
:is(selector1, selector2) {
/* Styles applied to elements matching any of the selectors */
}
/* 25. :where() Pseudo-class */
:where(selector1, selector2) {
/* Similar to :is(), but with lower specificity */
}
/* 26. :has() Pseudo-class (Experimental) */
selector:has(child-selector) {
/* Styles applied to elements that contain a specific child */
}
/* Example */
div:has(p) {
/* Styles applied to <div> elements that contain a <p> element */
}
/* 27. :focus-within Pseudo-class */
selector:focus-within {
/* Styles applied to elements that contain a focused element */
}
/* 28. :placeholder-shown Pseudo-class */
input:placeholder-shown {
/* Styles applied to input elements with placeholder text visible */
}
/* 29. :read-only Pseudo-class */
input:read-only {
/* Styles applied to read-only input elements */
}
/* 30. :read-write Pseudo-class */
input:read-write {
/* Styles applied to editable input elements */
}
/* 31. :required Pseudo-class */
input:required {
/* Styles applied to required input elements */
}
/* 32. :optional Pseudo-class */
input:optional {
/* Styles applied to optional input elements */
}
/* 33. :valid Pseudo-class */
input:valid {
/* Styles applied to input elements with valid content */
}
/* 34. :invalid Pseudo-class */
input:invalid {
/* Styles applied to input elements with invalid content */
}
/* 35. :in-range Pseudo-class */
input:in-range {
/* Styles applied to input elements with a value within a specified range */
}
/* 36. :out-of-range Pseudo-class */
input:out-of-range {
/* Styles applied to input elements with a value outside a specified range */
}
/* 37. :default Pseudo-class */
input:default {
/* Styles applied to default input elements (e.g., default radio button) */
}
/* 38. :indeterminate Pseudo-class */
input:indeterminate {
/* Styles applied to input elements in an indeterminate state */
}
/* 39. :dir() Pseudo-class */
selector:dir(ltr) {
/* Styles applied to elements with a specific text direction */
}
/* Example */
p:dir(rtl) {
/* Styles applied to <p> elements with right-to-left text direction */
}
/* 40. :fullscreen Pseudo-class */
:fullscreen {
/* Styles applied to elements in fullscreen mode */
}
/* 41. :modal Pseudo-class */
:modal {
/* Styles applied to modal elements (e.g., dialogs) */
}
/* 42. :picture-in-picture Pseudo-class */
:picture-in-picture {
/* Styles applied to elements in picture-in-picture mode */
}
/* 43. :playing Pseudo-class */
:playing {
/* Styles applied to playing media elements */
}
/* 44. :paused Pseudo-class */
:paused {
/* Styles applied to paused media elements */
}
/* 45. :muted Pseudo-class */
:muted {
/* Styles applied to muted media elements */
}
/* 46. :autofill Pseudo-class */
input:autofill {
/* Styles applied to autofilled input elements */
}
/* 47. :user-invalid Pseudo-class */
input:user-invalid {
/* Styles applied to input elements with invalid content after user interaction */
}
/* 48. :user-valid Pseudo-class */
input:user-valid {
/* Styles applied to input elements with valid content after user interaction */
}
/* 49. :scope Pseudo-class */
:scope {
/* Styles applied to the scoping element */
}
/* 50. :defined Pseudo-class */
:defined {
/* Styles applied to custom elements that are defined */
}
/* 51. :host Pseudo-class */
:host {
/* Styles applied to the shadow host element */
}
/* 52. :host() Pseudo-class */
:host(selector) {
/* Styles applied to the shadow host element matching the selector */
}
/* 53. :host-context() Pseudo-class */
:host-context(selector) {
/* Styles applied to the shadow host element in a specific context */
}
/* 54. ::slotted() Pseudo-element */
::slotted(selector) {
/* Styles applied to slotted elements in a shadow DOM */
}
/* 55. ::part() Pseudo-element */
::part(part-name) {
/* Styles applied to elements with a specific part attribute */
}
/* 56. ::cue Pseudo-element */
::cue {
/* Styles applied to WebVTT cues */
}
/* 57. ::cue-region Pseudo-element */
::cue-region {
/* Styles applied to WebVTT cue regions */
}
/* 58. ::backdrop Pseudo-element */
::backdrop {
/* Styles applied to the backdrop of fullscreen or modal elements */
}
/* 59. ::marker Pseudo-element */
::marker {
/* Styles applied to list item markers */
}
/* 60. ::selection Pseudo-element */
::selection {
/* Styles applied to the selected text */
}
/* 61. ::spelling-error Pseudo-element */
::spelling-error {
/* Styles applied to text marked as a spelling error */
}
/* 62. ::grammar-error Pseudo-element */
::grammar-error {
/* Styles applied to text marked as a grammar error */
}
/* 63. ::target-text Pseudo-element */
::target-text {
/* Styles applied to text targeted by the URL fragment */
}
/* 64. ::view-transition Pseudo-element */
::view-transition {
/* Styles applied to view transitions */
}
/* 65. ::view-transition-group() Pseudo-element */
::view-transition-group(name) {
/* Styles applied to view transition groups */
}
/* 66. ::view-transition-image-pair() Pseudo-element */
::view-transition-image-pair(name) {
/* Styles applied to view transition image pairs */
}
/* 67. ::view-transition-old() Pseudo-element */
::view-transition-old(name) {
/* Styles applied to the old state of a view transition */
}
/* 68. ::view-transition-new() Pseudo-element */
::view-transition-new(name) {
/* Styles applied to the new state of a view transition */
}
/* 69. ::view-transition-group-root Pseudo-element */
::view-transition-group-root {
/* Styles applied to the root view transition group */
}
/* 70. ::view-transition-image-pair-root Pseudo-element */
::view-transition-image-pair-root {
/* Styles applied to the root view transition image pair */
}
/* 71. ::view-transition-old-root Pseudo-element */
::view-transition-old-root {
/* Styles applied to the root old state of a view transition */
}
/* 72. ::view-transition-new-root Pseudo-element */
::view-transition-new-root {
/* Styles applied to the root new state of a view transition */
}
/* 73. ::view-transition-group(*) Pseudo-element */
::view-transition-group(*) {
/* Styles applied to all view transition groups */
}
/* 74. ::view-transition-image-pair(*) Pseudo-element */
::view-transition-image-pair(*) {
/* Styles applied to all view transition image pairs */
}
/* 75. ::view-transition-old(*) Pseudo-element */
::view-transition-old(*) {
/* Styles applied to all old states of view transitions */
}
/* 76. ::view-transition-new(*) Pseudo-element */
::view-transition-new(*) {
/* Styles applied to all new states of view transitions */
}
/* 77. ::view-transition-group(*):only-child Pseudo-element */
::view-transition-group(*):only-child {
/* Styles applied to view transition groups that are the only child */
}
/* 78. ::view-transition-image-pair(*):only-child Pseudo-element */
::view-transition-image-pair(*):only-child {
/* Styles applied to view transition image pairs that are the only child */
}
/* 79. ::view-transition-old(*):only-child Pseudo-element */
::view-transition-old(*):only-child {
/* Styles applied to old states of view transitions that are the only child */
}
/* 80. ::view-transition-new(*):only-child Pseudo-element */
::view-transition-new(*):only-child {
/* Styles applied to new states of view transitions that are the only child */
}
/* 81. ::view-transition-group(*):first-child Pseudo-element */
::view-transition-group(*):first-child {
/* Styles applied to the first child view transition group */
}
/* 82. ::view-transition-image-pair(*):first-child Pseudo-element */
::view-transition-image-pair(*):first-child {
/* Styles applied to the first child view transition image pair */
}
/* 83. ::view-transition-old(*):first-child Pseudo-element */
::view-transition-old(*):first-child {
/* Styles applied to the first child old state of a view transition */
}
/* 84. ::view-transition-new(*):first-child Pseudo-element */
::view-transition-new(*):first-child {
/* Styles applied to the first child new state of a view transition */
}
/* 85. ::view-transition-group(*):last-child Pseudo-element */
::view-transition-group(*):last-child {
/* Styles applied to the last child view transition group */
}
/* 86. ::view-transition-image-pair(*):last-child Pseudo-element */
::view-transition-image-pair(*):last-child {
/* Styles applied to the last child view transition image pair */
}
/* 87. ::view-transition-old(*):last-child Pseudo-element */
::view-transition-old(*):last-child {
/* Styles applied to the last child old state of a view transition */
}
/* 88. ::view-transition-new(*):last-child Pseudo-element */
::view-transition-new(*):last-child {
/* Styles applied to the last child new state of a view transition */
}
/* 89. ::view-transition-group(*):nth-child(n) Pseudo-element */
::view-transition-group(*):nth-child(n) {
/* Styles applied to the nth child view transition group */
}
/* 90. ::view-transition-image-pair(*):nth-child(n) Pseudo-element */
::view-transition-image-pair(*):nth-child(n) {
/* Styles applied to the nth child view transition image pair */
}
/* 91. ::view-transition-old(*):nth-child(n) Pseudo-element */
::view-transition-old(*):nth-child(n) {
/* Styles applied to the nth child old state of a view transition */
}
/* 92. ::view-transition-new(*):nth-child(n) Pseudo-element */
::view-transition-new(*):nth-child(n) {
/* Styles applied to the nth child new state of a view transition */
}
/* 93. ::view-transition-group(*):nth-last-child(n) Pseudo-element */
::view-transition-group(*):nth-last-child(n) {
/* Styles applied to the nth child view transition group from the end */
}
/* 94. ::view-transition-image-pair(*):nth-last-child(n) Pseudo-element */
::view-transition-image-pair(*):nth-last-child(n) {
/* Styles applied to the nth child view transition image pair from the end */
}
/* 95. ::view-transition-old(*):nth-last-child(n) Pseudo-element */
::view-transition-old(*):nth-last-child(n) {
/* Styles applied to the nth child old state of a view transition from the end */
}
/* 96. ::view-transition-new(*):nth-last-child(n) Pseudo-element */
::view-transition-new(*):nth-last-child(n) {
/* Styles applied to the nth child new state of a view transition from the end */
}
/* 97. ::view-transition-group(*):only-of-type Pseudo-element */
::view-transition-group(*):only-of-type {
/* Styles applied to view transition groups that are the only one of their type */
}
/* 98. ::view-transition-image-pair(*):only-of-type Pseudo-element */
::view-transition-image-pair(*):only-of-type {
/* Styles applied to view transition image pairs that are the only one of their type */
}
/* 99. ::view-transition-old(*):only-of-type Pseudo-element */
::view-transition-old(*):only-of-type {
/* Styles applied to old states of view transitions that are the only one of their type */
}
/* 100. ::view-transition-new(*):only-of-type Pseudo-element */
::view-transition-new(*):only-of-type {
/* Styles applied to new states of view transitions that are the only one of their type */
}
/* 101. ::view-transition-group(*):first-of-type Pseudo-element */
::view-transition-group(*):first-of-type {
/* Styles applied to the first view transition group of its type */
}
/* 102. ::view-transition-image-pair(*):first-of-type Pseudo-element */
::view-transition-image-pair(*):first-of-type {
/* Styles applied to the first view transition image pair of its type */
}
/* 103. ::view-transition-old(*):first-of-type Pseudo-element */
::view-transition-old(*):first-of-type {
/* Styles applied to the first old state of a view transition of its type */
}
/* 104. ::view-transition-new(*):first-of-type Pseudo-element */
::view-transition-new(*):first-of-type {
/* Styles applied to the first new state of a view transition of its type */
}
/* 105. ::view-transition-group(*):last-of-type Pseudo-element */
::view-transition-group(*):last-of-type {
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)