A relative selector is a type of selector that targets elements based on their relation to other elements in the document.
There are several types of relative selectors that can be used to target elements in different ways. Some common types of relative selectors include:
| Selector | Description |
|---|---|
| Descendant | Target elements that are descendants (i.e., children, grandchildren, etc.) of a specific element. To use a descendant selector, you separate the ancestor element and descendant element with a space. For example, #intro p would target all p elements that are descendants of the element with the ID intro. |
| Child | Target elements that are direct children (i.e., immediate descendants) of a specific element. To use a child selector, you separate the parent element and child element with a greater than symbol (>). For example, #intro > p would target all p elements that are direct children of the element with the ID intro. |
| Adjacent sibling | Target elements that are siblings (i.e., elements that have the same parent) of a specific element and immediately follow it. To use an adjacent sibling selector, you separate the two elements with a plus sign (+). For example, h1 + p would target the first p element that immediately follows an h1 element. |
| General sibling | Target elements that are siblings of a specific element and follow it, regardless of whether they are immediately adjacent or not. To use a general sibling selector, you separate the two elements with a tilde (~). For example, h1 ~ p would target all p elements that follow an h1 element, regardless of whether they are immediately adjacent or not. |
| First-of-type | Target the first element of a specific type within its parent element. For example, li:first-of-type would target the first li element within its parent element. |
| Last-of-type | Target the last element of a specific type within its parent element. For example, li:last-of-type would target the last li element within its parent element. |
|
Only-of-type |
Target elements that are the only element of a specific type within their parent element. For example, li:only-of-type would target li elements that are the only li elements within their parent element. |
|
Nth-of-type |
Target elements based on their position within their parent element. For example, li:nth-of-type(2) would target the second li element within its parent element. You can use various formulas to specify the position, such as 2n+1 to target every odd-numbered element. |
|
First-child |
Target the first child element of a specific element. For example, #intro > :first-child would target the first child element of the element with the ID intro. |
|
Last-child |
Target the last child element of a specific element. For example, #intro > :last-child would target the last child element of the element with the ID intro. |
|
Only-child |
Target elements that are the only child element of their parent element. For example, #intro > :only-child would target the only child element of the element with the ID intro. |
|
Nth-child |
Target elements based on their position as a child element within their parent element. For example, |
Relative selectors can be used in conjunction with other selectors to create more specific targets. For example, you could use the #intro p.warning selector to target all p elements with the class warning that are descendants of the element with the ID intro.
NEXT: How Organic Uses Selectors