jQuery Element Selector (“element”)

What You’ll Learn

The element selector matches every node with a given HTML tag name — div, p, input, and so on. Available since jQuery 1.0; one of the first selectors beginners learn alongside class and ID.

Introduction

Before classes and IDs, HTML documents are built from tags — <div>, <p>, <a>, <input>. The element selector targets nodes by that tag name: pass the tag as a string to $() with no prefix.

Official jQuery documentation notes that the parameter refers to the tagName of DOM nodes. When you write $("div"), jQuery calls the browser’s getElementsByTagName() and returns a jQuery collection you can chain with methods like .css() or .hide().

Understanding the Element Selector

An element selector is a type selector in CSS terms:

• $("div") → every <div> in the context — nested or not.
• $("span") → every <span>; does not match <div>.
• $("input") → all input types unless you add [type=...].
• Combine: $("li.active") → li elements with class active.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "element" )



// common patterns:

$( "div" )

$( "p" )

$( "input" )

$( "div.card" )       // element + class

$( "#sidebar li" )    // scoped descendant

Parameters

• element — the HTML tag name to search for (typically lowercase).

Return value

• A jQuery object containing every element with that tag name in the search context.
• Empty collection when no matching tags exist.

Official jQuery API example

// Finds every DIV element and adds a red border

$( "div" ).css( "border", "9px solid red" );

Examples Gallery

Example 1 follows the official jQuery div demo. Examples 2–5 cover counting tags, scoped paragraphs, element + class, and styling all links. Use the Try-it links to run each snippet.

$( "div" ).css( "border", "9px solid red" );



// DIV1 and DIV2 match; SPAN does not

DIV1, DIV2 → 9px solid red border

SPAN → unchanged

var count = $( "p" ).length;

$( "#paraCount" ).text( count + " paragraph(s)" );

3 p elements → "3 paragraph(s)"

$( "#article p" ).css( "line-height", "1.8" );



// Descendant combinator + element selector

#article paragraphs → line-height 1.8

Footer paragraph → unchanged

$( "div.card" ).addClass( "highlight" );



// span.card would NOT match — wrong tag

div.card → highlight class

span.card → no match (element type filter)

$( "a" ).addClass( "site-link" );



// Every a element in the document context

All anchor tags → class "site-link"

🚀 Common Use Cases

• Layout blocks — $("div") or $("section") for structure passes.
• Typography — $("#article p") for readable line height.
• Forms — $("form input") to validate or style all inputs.
• Lists — $("ul li") for menu or list item styling.
• Media — $("img") for lazy-load or responsive classes.
• Combined — $("button.primary") for typed component variants.

📝 Notes

• Available since jQuery 1.0 — standard CSS type selector.
• Parameter refers to tagName of DOM nodes (official API).
• Uses getElementsByTagName() for element-only selectors.
• Use lowercase tag names: div, not DIV, in selectors.
• Combine with class, ID, and combinators for precise queries.
• Scope broad tags — $("div") on large pages can match hundreds of nodes.

💡 Best Practices