Universal Selector

Applies styles to all elements on the page.

* {
  margin: 0;
  padding: 0;
}

Type Selector

Targets all elements of a specific type.

p {
  color: blue;
}

Class Selector

Targets elements with a specific class.

.box {
  border: 1px solid black;
}

ID Selector

Targets a specific element with a unique ID.

#header {
  background-color: gray;
}

Grouping Selector

Applies the same styles to multiple selectors.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Descendant Selector

Targets elements inside a specific parent element.

div p {
  font-size: 14px;
}

Child Selector

Targets direct child elements only.

div > p {
  color: red;
}

Adjacent Sibling Selector

Targets the next immediate sibling element.

h1 + p {
  font-style: italic;
}

General Sibling Selector

Targets all siblings that follow a specified element.

h1 ~ p {
  color: green;
}