Other Selectors

Element selector

This selector is used to select and style all elements of a particular type on the page. It is identified by the element type (e.g., p, div, h1, etc.).

css
Copier le code
9
1
2
3
p {
  color: blue;
}

This selector will select and style all p elements on the page, giving them a blue color.

Descendant selector

This selector is used to select and style elements that are descendants of a particular element. The ancestor element, a space, and the descendant element identify it.

css
Copier le code
9
1
2
3
4
div p{
  font-size: 12px;
}

This selector will select and style all p elements descendants of a div element, giving them a font size of 12px.

Child selector

This selector is used to select and style elements that are direct children of a particular element. It is identified by the parent element, followed by a > symbol, followed by the child element.

css
Copier le code
9
1
2
3
div > p {
  font-style: italic;
}

This selector will select and style all p elements that are direct children of a div element, giving them an italic font style.

Adjacent sibling selector

This selector is used to select and style elements that are siblings of a particular element and come immediately after it. It is identified by the first element, followed by a + symbol, followed by the second element.

css
Copier le code
9
1
2
3
div + p {
  margin-top: 0;
}

General sibling selector

This selector is used to select and style elements that are siblings of a particular element and come after it. It is identified by the first element, followed by a ~ symbol, followed by the second element. For example:

css
Copier le code
9
1
2
3
div ~ p {
  color: red;
}

This selector will select and style all p elements that are siblings of a div element and come after it, giving them a red color.

Attribute selector

This selector selects and styles elements based on their attribute values. It is identified by the element type, followed by an opening square bracket [, followed by the attribute name and value, and a closing square bracket ].

css
Copier le code
9
1
2
3
a[href^="https"] {
  color: orange;
}

This selector will select and style all elements with an href attribute that starts with 'https', giving them an orange color.