Selectors¶

CSS selectors target HTML elements to apply styles. They determine what gets styled.

1. Basic Selectors¶

Targets all elements of a specific type.

p {
  color: black;
}

Targets elements with a specific class.

.title {
  font-weight: bold;
}

Targets a unique element with a specific id.

#main-heading {
  font-size: 32px;
}

Apply the same style to multiple selectors.

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

Targets elements nested inside another.

div p {
  color: gray;
}

Targets direct children only.

ul > li {
  list-style: none;
}

Targets the first element immediately after another.

h1 + p {
  margin-top: 0;
}

Targets all siblings after the first.

h1 ~ p {
  color: blue;
}

Target elements based on attributes.

input[type="text"] {
  border: 1px solid #ccc;
}

Target elements based on state or position.

a:hover {
  text-decoration: underline;
}

li:first-child {
  font-weight: bold;
}

Style parts of elements.

p::first-line {
  font-variant: small-caps;
}