jQuery Has Attribute [name] Selector

What You’ll Learn

The has-attribute selector — written [name] — matches elements that have the named attribute, regardless of its value. It is the simplest attribute filter and the foundation before [name="value"] exact matching. Standard CSS since jQuery 1.0.

Introduction

Sometimes you care whether an attribute exists at all — not what it equals. Links with an href, images with alt, inputs marked required, or any element with an id. The CSS presence selector [attribute] answers that question in one concise expression.

jQuery has supported [attribute] since version 1.0. Official documentation describes it as selecting elements that have the specified attribute with any value. It works in stylesheets and in jQuery selector strings — a natural first step before learning equals, prefix, and substring operators.

Understanding the Has-Attribute Selector

Think of [attribute] as “does this element carry this attribute name?”:

• <div id="foo"> + div[id] → matches.
• <div> (no id) + div[id] → no match.
• <input required> + input[required] → matches (boolean attribute).
• id="foo" matches [id] and [id="foo"] — presence vs exact value.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attribute]" )

// typical usage — combine with tag name:
$( "div[id]" )
$( "input[required]" )
$( "a[href]" )
$( "img[alt]" )

Parameters

• attribute — the HTML attribute name to test for presence (id, href, required, etc.).

Return value

• A jQuery object containing every element that has the named attribute.
• Empty collection when no elements in scope carry that attribute.

Official jQuery API example

$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});

Examples Gallery

Example 1 follows the official jQuery div[id] one-click demo. Examples 2–5 target required inputs, links with href, contrast with exact match, and highlight images with alt.

$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});

Click "with id" → with id = foo
Click "has an id" → has an id = bar
"no id" and "nope" → no handler (no id attribute)

$( "input[required]" ).css({
  borderLeft: "4px solid #dc2626"
});

Name and Email (required) → red left border
Optional phone field → default styling

$( "a[href]" ).css( "textDecoration", "underline" );
console.log( "Links with href:", $( "a[href]" ).length );

Home and Docs links → underlined
<a> without href (placeholder) → not matched
Console: Links with href: 2

console.log( "Has id →", $( "div[id]" ).length );
console.log( 'id="foo" →', $( 'div[id="foo"]' ).length );

Has id → 2 (foo and bar)
id="foo" → 1 (exact value only)

$( "img[alt]" ).css( "outline", "3px solid #16a34a" );
$( "img:not([alt])" ).css( "outline", "3px solid #dc2626" );

Photo with alt → green outline
Decorative image without alt → red outline

🚀 Common Use Cases

• IDs present — bind handlers to div[id] as in the official demo.
• Form validation — highlight input[required] fields.
• Real links — style a[href] separately from placeholder anchors.
• Accessibility — audit img[alt] and input[aria-label].
• Data attributes — find [data-id] before reading values with .data().
• CSS parity — same selector in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.0 — standard CSS attribute presence selector.
• Matches any value — including empty string if the attribute is present in markup.
• Foundation before [attr="value"], [attr*="value"], and other operators.
• Combine with element type — input[required] not bare [required] on large pages.
• Works in native querySelectorAll("a[href]") in modern browsers.
• Does not match attributes added only via JavaScript until reflected in the DOM attribute map jQuery queries.

💡 Best Practices