CSS Selectors Cheat Sheet

Here’s a cheat sheet covering some common CSS selectors:

Basic Selectors

Universal Selector:

* {
  property: value;
}

Type Selector:

h1 {
  property: value;
}

Class Selector:

.classname {
  property: value;
}

ID Selector:

#elementid {
  property: value;
}

Attribute Selector:

input[type="text"] {
  property: value;
}

Descendant and Child Selectors

Descendant Selector:

div p {
  property: value;
}

Child Selector:

ul > li {
  property: value;
}

Adjacent Sibling and General Sibling Selectors

Adjacent Sibling Selector:

h2 + p {
  property: value;
}

General Sibling Selector:

h2 ~ p {
  property: value;
}

Pseudo-classes

Hover Pseudo-class:

a:hover {
  property: value;
}

Active Pseudo-class:

button:active {
  property: value;
}

Focus Pseudo-class:

input:focus {
  property: value;
}

First Child Pseudo-class:

li:first-child {
  property: value;
}

Last Child Pseudo-class:

li:last-child {
  property: value;
}

Nth Child Pseudo-class:

li:nth-child(2) {
  property: value;
}

Pseudo-elements

First Line Pseudo-element:

p::first-line {
  property: value;
}

First Letter Pseudo-element:

p::first-letter {
  property: value;
}

Attribute Selectors

Attribute Presence:

input[type] {
  property: value;
}

Attribute Exact Match:

input[type="text"] {
  property: value;
}

Attribute Starts With:

[class^="btn"] {
  property: value;
}

Attribute Ends With:

[class$="-btn"] {
  property: value;
}

Attribute Contains:

[class*="active"] {
  property: value;
}

Grouping Selectors

Grouping Selectors:

h1, h2, h3 {
  property: value;
}

Combining Selectors

Combining Selectors:

div.container p {
  property: value;
}

This cheat sheet provides a quick reference for common CSS selectors. Adjust the selectors and properties based on your specific styling requirements.