Using CSS selectors with jQuery

Basic CSS selectors

The most basic CSS selector is to simply use the name of the element you're looking for. Want all h1 elements? Simply use h1 as your selector.

$('h1') // selects all h1 elements

You will notice, just as we saw with document.ready, we pass the appropriate text into the jQuery constructor to indicate the selector we wish to use. Because of the flexibility of JavaScript, and how jQuery was designed, this patter stays rather consistent whenever you're looking to get started using jQuery in a page - simply pass the appropriate text, item, or other component, into the constructor, and jQuery will handle it from there.

Bringing it back to CSS selectors, let's take a look at using classes. If you need to find all items that use a particular class, you can simply use the name of the class with a dot in front of it, just as you would if you were creating a CSS stylesheet.

$('.class-name') // selects all elements with a class of class-name

And finally, if you wish to find an item by its ID, you use the same CSS syntax, prepending the ID name with a hash.

$('#demo') // selects all elements with an id of demo

Attribute-based selectors

The HTML specification defines many attributes, such as class and style as well as allowing developers to add their own attributes. By using CSS selector syntax, you can locate items based on both custom and predefined attributes.

To find elements in which an attribute is set to a specific value, you use the equality syntax. Note that the value you wish to compare must be in quotes, which means you need to use both single and double quotes to create the appropriate string. While the actual quotes you use are up to you, I ,and most JavaScript developers I've worked with, use single quotes for normal strings in JavaScript, and then use double quotes when we need to indicate a quoted value inside of a string.

// selects **all** elements with an attribute matching the specified value
$('[demo-attribute="demo-value"]') 

// selects all **h1** elements with an attribute matching the specified value
$('h1[demo-attribute="demo-value"]')

Locating items by partial attribute values

Many frameworks, such as Bootstrap, make their magic happen by having developers add certain classes or other attributes to their HTML. Often, the values you'll use for classes or attributes have consistent patterns or prefixes. jQuery allows you to select items by searching inside of attribute values for desired sub-strings.

If you wish to find all elements where the value starts with a string, use the ^= operator.

$('[class^="col"]')

If you wish to find all elements where the value contains a string, use the *= operator.

$('[class*="md"]')

There are several more operators available. See the documentation jQuery.com for a full list.

Positional selectors

Oftentimes you need to located elements based on where they are on the page, or in relation to other elements in the DOM. For example, an aelement inside of a nav section may need to be treated differently than a elements elsewhere on the page. CSS, and in turn jQuery, offer the ability to find items based on their location.

Parent/child relationships

The simplest location selector is one for parent/child. The > between selectors indicates the parent/child relationship. With this relationship, the second item listed must be a direct child of the first item, with no other elements between the two.

Consider the following script:

// Selects all a elements that are direct descendants nav element
$('nav > a')

In the following HTML, the first link would be selected, but not the second. This is because the first link is a direct child, but the second is inside of a div element.

<nav>
 <a href="#">(First) This will be selected</a>
 <div>
  <a href="#">(Second) This will **not** be selected</a>
 </div>
</nav>

Descendants

To select elements where the targeted element is a descendant of another element, regardless of how many levels exist between the two, simply put a space between the two selectors.

// Selects all a elements that are descendants nav element
// The elements can appear anywhere inside of the element listed first
$('nav a')

While the difference in syntax is subtle, it makes a big difference in regards to the items selected. Using the same HTML from above, both aelements would be selected by using the syntax $('nav a).

<nav>
 <a href="#">(First) This will be selected</a>
 <div>
  <a href="#">(Second) This will be selected</a>
 </div>
</nav>

Have a try

See the Pen CSS selectors and jQuery by Christopher Harrison (@GeekTrainer) on CodePen.