:firstS2C 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. - Like all the positional selectors
:eq()uses a zero-based index to select from previously filtered elements. - Being a jQuery extension the
:eq()pseudo 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 ExampleTop
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 'javatable'. 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() {
$(".javatable td:first").css('backgroundColor', 'orange');
});
});