YouTip

## jQuery :gt() Selector The jQuery `:gt()` selector is a built-in index-based filter used to select all elements at an index greater than a specified number. In jQuery, index numbers are **zero-based**, meaning the first matched element has an index of `0`, the second has an index of `1`, and so on. --- ## Syntax ```javascript $(":gt(index)") ``` ### Parameters | Parameter | Type | Description | | :--- | :--- | :--- | | `index` | Integer | **Required.** Specifies the zero-based index. The selector will match all elements with an index strictly greater than this value. | --- ## Usage and Examples The `:gt()` selector is most commonly combined with other selectors (such as element selectors or class selectors) to filter a specific subset of elements. ### Example 1: Selecting Table Rows Select and style all table rows (``) after the first 4 rows (index greater than 3): ```javascript $(document).ready(function(){ // Selects the 5th table row (index 4) and all subsequent rows $("tr:gt(3)").css("background-color", "yellow"); }); ``` ### Example 2: Selecting List Items Select all list items (`

`) after the second item (index greater than 1): ```html

• Item 1 (Index 0)
• Item 2 (Index 1)
• Item 3 (Index 2) - Highlighted
• Item 4 (Index 3) - Highlighted

``` --- ## Important Considerations ### 1. Negative Index Support In modern jQuery versions, you can pass a negative index to `:gt()`. When a negative number is provided, it counts backward from the last element in the matched set. * For example, `:gt(-3)` selects elements with an index greater than `length - 3` (i.e., the last two elements). ### 2. Performance Recommendation Because `:gt()` is a jQuery extension and not part of the CSS specification, queries using `:gt()` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For optimal performance in modern applications, it is recommended to use the native-compliant `.slice()` method instead: ```javascript // Instead of this: $("div:gt(2)") // Use this for better performance: $("div").slice(3) ``` ### 3. Related Selectors * Use the **[:lt() selector](sel-lt.html)** to select elements with an index less than the specified number. * Use the **:eq() selector** to select an element at a precise index.