Filter selector
Filter selectors filter DOM elements through specific filtering rules. The filtering rules have the same syntax as pseudo-class selectors in the CSS, and all selectors start with a colon (:). According to different filtering rules, filter selectors can be divided into the following categories:
- Basic filter selector
- Content filtering selector
- Visibility filter selector
- Property filter selector
- Child element filter selector
- Form object property filter selector
Let’s take a look at these types of selectors.
1. Basic filter selector
| The selector | describe | The return value |
|---|---|---|
| :first | Pick the first element | A single element |
| :last | Pick the last element | A single element |
| :not(selector) | Removes all elements that match the given selector | A collection of elements |
| :even | Selects all elements whose index is even, starting at 0 | A collection of elements |
| :odd | Selects all elements whose indexes are odd, starting at 0 | A collection of elements |
| :eq(index) | Selects all elements whose index is equal to index, starting at 0 | A single element |
| :gt(index) | Selects all elements whose index is greater than index, starting at 0 | A collection of elements |
| :lt(index) | Selects all elements whose index is less than index, starting at 0 | A collection of elements |
| :header | Select all heading elements, such as H1, H2, H3, and so on | A collection of elements |
| :animated | Selects all elements that are currently animating | A collection of elements |
| :focus | Selects the element that currently gets focus | A collection of elements |
2. Content filtering selector
Filtering rules are mainly reflected in the child elements or text content it contains.
| The selector | describe | The return value |
|---|---|---|
| :contains(text) | Select the element with text content of “text” | A collection of elements |
| :empty | Selects an empty element that contains no child elements or text | A collection of elements |
| :has(selector) | Selects the element that contains the element matched by the selector | A collection of elements |
| :parent | Selects an element that contains child elements or text | A collection of elements |
3. Visibility filter selector
Filtering rules select elements based on their visible and invisible states.
| The selector | describe | The return value |
|---|---|---|
| :hidden | Selects all invisible elements | A collection of elements |
| :visible | Selects all visible elements | A collection of elements |
4. Attribute filter selector
Filtering rules are used to retrieve elements by their attributes
| The selector | describe | The return value |
|---|---|---|
| [attribute] | Selects the element that has this element | A collection of elements |
| [attribute=value] | Selects the element whose attribute value is value | A collection of elements |
| [attribute!=value] | Selects an element whose attribute value is not equal to value | A collection of elements |
| [attribute^=value] | Selects the element whose attribute value begins with value | A collection of elements |
| [attribute$=value] | Selects the element whose attribute’s value ends in value | A collection of elements |
| [attribute*=value] | Selects the element that contains value for the attribute | A collection of elements |
| [attribute|value] | Selects an element whose attribute is equal to or prefixed with the given string | A collection of elements |
| [attribute~value] | Selects the element containing a given value in the whitespace separated value of the attribute | A collection of elements |
| [attribute][attribute2][attributeN] | Combine property selectors into a compound property selector that satisfies multiple criteria and Narrows the range each time it is selected | A collection of elements |
5. Child element filter selector
Filtering rules are relatively complex
| The selector | describe | The return value |
|---|---|---|
| :nth-child(index) | Selects the index child of each parent element (index starts at 1) | A collection of elements |
| :first-child | Selects the first child of each parent element | A collection of elements |
| :last-child | Selects the last child element under each parent element | A collection of elements |
| :only-child | If an element is the only child of its parent, a match will be made | A collection of elements |
6. Form object property filter selector
This selector primarily filters the selected form elements
| The selector | describe | The return value |
|---|---|---|
| :enable | Select all available elements | A collection of elements |
| :disable | Selects all unavailable elements | A collection of elements |
| :checked | Selects all selected elements (checkboxes, checkboxes) | A collection of elements |
| :selected | Selects all selected elements (option elements) | A collection of elements |