:first ** DEPRECATED **
JQ Home <<
Selectors <<
:first
First element match selector.
Shorthand version $(':first')
Description
The :first selector, selects the first matched element.
- Unlike the
:first-childelement this selector will only ever return one element. - Being a jQuery extension the
:firstpseudo selector is not part of any current CSS specification. Therefore:firstcannot take advantage of the performance boost provided by the native DOMquerySelectorAll()method. - The same results can be achieved with better performance using the
:firstmethod with a valid CSS selector, for example$("cssSelector"):first.
This method was deprecated in jQuery 3.4.
Syntax
| Signature | Description |
|---|---|
jQuery(':first') | First element match |
Parameters
None.
Return
N/A.
:first Example
Selectors << Top
Selects first matched element.
In the example below we apply an orange background to first 'td' element of the tables marked with a class of 'jskeywordtable'. So the table below will not be selected but the Syntax table above will be.
| Table Row 1, Table Data 1 | Table Row 1, Table Data 2 |
| Table Row 2, Table Data 1 | Table Row 2, Table Data 2 |
| Table Row 3, Table Data 1 | Table Row 3, Table Data 2 |
| Table Row 4, Table Data 1 | Table Row 4, Table Data 2 |
$(function(){
$('#btn1').on('click', function() {
$(".jskeywordtable td:first").css('backgroundColor', 'orange');
});
});
Related Tutorials
jQuery Basic Tutorials - Lesson 4 - jQuery Selectors