# Selectors As I mentioned earlier, finding elements on the page is practically half the battle when working with jQuery. So let's get searching through the document. ### Identifiers and Classes Selecting elements by `id` or class name, just like in CSS:
selector
$("#content")select the element with id="content"
$("section#content")select the <section> with id="content"
$(".intro")select elements with class="intro"
$(".intro.pinned")select elements with both classes intro and pinned
$("h3")select all <h3> tags
$("h1, h2")select all <h1> and <h2> tags
{% hint style="info" %} Use valid class names and identifiers {% endhint %} ### Child Elements Now let's remember that we're not alone in the DOM — it's a hierarchical structure after all:
selector
$("article h3")select all <h3> tags inside the <article> tag
$("article").find("h3")same as the example above
$("section article h3")select all <h3> tags inside <article>, which are inside <section>, in the DOM that Jack built
$("section")
.find("article")
.find("h3")		and once more, but in a different way — under the hood it works differently, but we'll talk about that later
### Sibling Elements We have neighbors, and we've got a good connection with them. Here are a few ways to find them:
selector
$("article + article")select all <article> elements preceded by an <article> tag
$("#stick ~ article")select all <article> elements after the element with id="stick"
$("#stick").next()select the next element after the element with id="stick"
### Descendants and Parents Family ties matter:
selector
$("article > h3")select all <h3> tags that are direct descendants of the <article> tag
$("article > *")select all descendants of <article> elements
$("article").children()same as the example above
$("p").parent()select all direct parents of <p> elements
$("p").parents()select all ancestors of <p> elements
quite an exotic task
$("p").parents("section")select all ancestors of <p> elements that are <section> (parents() accepts a selector as a parameter)
{% hint style="info" %} `$("*")` – select all elements; use with extreme caution {% endhint %} ### Searching by Attributes Back in the CSS2 days there was already the ability to find elements with specific attributes, and [CSS3](https://www.w3.org/TR/selectors-3/) expanded the capabilities of [attribute selectors](https://www.w3.org/TR/selectors-3/#attribute-selectors):
selector
$("a[href]")all links with an href attribute
$("a[href=#]")all links with href=#
$("a[href~=#]")all links where # is one of the words in href
$("a[hreflang|=en]")

all links with the word en in hreflang

the - character is treated as a word separator: en, en-US, en-UK

$("a[href^=https]")links starting with https
$("a[href*='google.com']")links to "google it"
$("a[href$=.pdf]")links to PDF files (in theory)
{% hint style="info" %} If you decide to peek inside jQuery, you'll most likely find the very place where your expression is being parsed using regular expressions. For this reason, you need to escape special characters in selectors using a double backslash "`\\`": ```javascript $("a[href^=\\/]").addClass("internal"); ``` {% endhint %} ### Structural Pseudo-classes I'd also like to draw your attention to the [structural pseudo-classes](https://www.w3.org/TR/selectors-3/#structural-pseudos) from the [CSS3](https://www.w3.org/TR/selectors-3/) specification — there are lots of interesting and useful ones, for example:
selector
$("ul li:first-child")first child element
$("ul li:last-child")last child element
$("ul li:nth-child(2n+1)")

selecting elements by a simple equation

you can read more in the article "How nth-child works"

### Negation Pseudo-class The negation pseudo-class `:not()` is one of a kind — it lets you select all elements that don't match the nested selection in the parentheses
selector
$("a:not(.active)")all <a> links without the active class
$("a").not(".active")same result, using the .not() method
> If you want to play around with selectors to your heart's content, open the page [css.selectors.html](https://anton.shevchuk.name/book/code/css.selectors.html) in a new tab, and there you can practice writing selectors using the menu on the right ### The "Election" Results When using the queries listed above you've found (or haven't found) DOM elements, a jQuery object will be returned containing an array of those elements. Here's what it looks like: ![jQuery length](https://1595523877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeoblpeDkWKYLsnjTzM5W%2Fuploads%2Fgit-blob-53b13662b18763630e7911ccfd32493423af8546%2Fjquery-length.png?alt=media) You may have noticed the `length` property. Yep, that's right — it's the number of found elements. So we can easily get that number with the following code: ```javascript alert( $("p").length ) ``` If you need to extract a found DOM element, you can do it by knowing its index. Essentially, it looks like accessing an array element: ```javascript // we search for all paragraphs // take the first one // get the paragraph's text // return the text length alert( $("p")[0].innerText.length ) ``` If you don't like this approach for aesthetic reasons, you can use the `.get()` method: ```javascript alert( $("p").get(0).innerText.length ) ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://antonshevchuk.gitbook.io/jquery-for-beginners/10_go_on/selectors.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.