CSS pseudo class selector :first - What is it? I found in sample code and can't find documentation on it

Question

In some sample code here at w3schools the selector is: ul li:first

I can't seem to find documentation on this usage of :first Here it makes only "Coffee" hide() and not "Coffee 2" as well. I'm brand new to jQuery, so perhaps it has some as yet unrevealed meaning there. code screenshot from Tryit Editor

It's a jquery selector that's seem be to similar to `:first-child` - https://api.jquery.com/first-selector/ — Ori Drori, Jan 19 '20 at 08:04
Does this answer your question? [CSS selector for first element with class](https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Roberto Caboni, Jan 19 '20 at 08:05
This is the third result from `google css :first` https://developer.mozilla.org/en-US/docs/Web/CSS/:first — Nick, Jan 19 '20 at 08:05
Thank you Ori Drori. It is a deprecated jquery selector. Preferred method is filter with .first() and that's all I saw in docs. — Jake Shepherd, Jan 19 '20 at 08:24

score 0 · Answer 1 · answered Jan 19 '20 at 14:34

I see that the comments answer the question fairly; but I would like to weigh in on one point raised by Ori Drori. While the :first selector is similar to :first-child, there is an inherent difference.

Let us use the very example linked in the question:

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>
<button>Click me</button>

When we run the following script :

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});

The item <li>Coffee</li> present in List 1 gets hidden. However the one present in List 2 stays visible.

If instead, we were to use the selector :first-child in the following manner:

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});

Both the <li>Coffee</li> elements get hidden.

This is because the :first selector accesses the first DOM node that satisfies the conditions given, i.e. the first element selected under the given selector.

Whereas the :first-child selector is more specific and selects the node that is the first child of it's parent element. As we can see, the second <li>Coffee</li> element is the first child of the list <ul>List 2</ul> Hence both the elements get hidden if we use the second script.

Hope this clarifies your doubts. A better practice, in my opinion, would be to use a class or id and be more specific while differentiating those elements whenever you need to.

CSS pseudo class selector :first - What is it? I found in sample code and can't find documentation on it

1 Answers1