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

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

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

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

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

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

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