CSS Selectors JQ Home  <<  JQ Basics  <<  CSS Selectors

There are thirty-three CSS selectors we can use in jQuery, in this lesson we look at some of these and how we use them with jQuery. We start with the CSS1/2 Selectors which are available in all modern browsers before looking at the CSS3 Selectors which are available from IE9+ and the latest versions of Firefox, Chrome, Safari and Opera.

Using CSS1/2 Selectors With jQuery

CSS1/2 selectors have been around a long time and should be familiar to anyone with knowledge of CSS. For this reason we will keep this section brief and just show a few examples to highlight the jQuery syntax required.

Next Adjacent ('previous + next') Example Top

Selects all specifed next sibling elements that are directly preceded by the specified previous sibling element.

For a match to occur both selectors must share the same parent.

The following example will select all 'p' elements that are preceded by 'h2' elements and place a 1 pixel solid red border around them. In this case the elements both share a common 'div' ancestor.


$(function(){
  $('#btn15').on('click', function() {
    $('h2 + p').css('border', '1px solid red');
  });
});

Press the button below to action the above code:

Attribute Equals [attr="value"] Example Top

Selects all elements that have the specified attribute name with a value exactly equal to the specified value.

The following example will select 'input' elements on the page that have a value attribute containing the values 'Turn Orange' or 'Turn Yellow' and change their background color to orange or yellow respectively (look at the two buttons below).


$(function(){
  $('#btn5').on('click', function() {
    $('input[value="btn5: Turn Orange"]').css('backgroundColor', 'orange');
  });
  $('#btn6').on('click', function() {
    $('input[value="btn6: Turn Yellow"]').css('backgroundColor', 'yellow');
  });
});

Press the buttons below to action the above code:

            

For the complete list of CSS1/2 selectors with working examples take a look at the reference section, or click on a CSS selector link at the bottom of this page to go straight to that selector reference.

Using CSS3 Selectors With jQuery

Although changes to W3C standards move at a glacial pace CSS3 selectors recommended by the W3C working group started being integrated into browsers in 2011. This means that IE9+ and the latest versions of Firefox, Chrome, Safari and Opera now recognize the new selectors and can work with them. It should be noted that jQuery adds functionality when wrapping our matched set, so you can use these selectors and be assured that they work on older browsers as well, while working within the jQuery wrapper. Some working examples of CSS3 selector usage are shown below:

Attribute Starts With [attr^="value"] Example Top

Selects all elements that have the specified attribute name with a starting value matching the specified string.

The following example will select 'a' elements within 'h3' elements with a 'href' attribute that starts with 'c' and place a red border around those links. For our example this is all the links within the right sidebar with a 'href' attribute starting with the letter 'c'.


$(function(){
  $('#btn19').on('click', function() {
    $('h3 a[href^="c"]').css('border', '1px solid red');
  });
});

Press the buttons below to action the above code:

:enabled Example Top

Selects all enabled elements.

The following example will check for enabled input elements with an attribute of name (our input fields below) and set a message in them with a yellow background when the button below is clicked.


$(function(){
  $('#btn22').on('click', function() {
    $("input[name]:enabled").css('backgroundColor', 'yellow')
                            .val("enter input"); 
  });
});

Please fill in the form:

Your Information

 Enter your name:

Press the button below to action the above code:

For the complete list of CSS 3 selectors with working examples take a look at the reference section, or click on a CSS selector link at the bottom of this page to go straight to that selector reference.

Lesson 3 Complete

In this lesson we looked at some of the CSS selectors available and how to use them in jQuery.

Related Tutorials

jQuery Basics - Lesson 4: jQuery Selectors

Reference

Methods

jQuery Reference - Attributes and Properties - .css() method
jQuery Reference - Attributes and Properties - .val() method
jQuery Reference - Events - .on() method
jQuery Reference - Events - .ready() method

CSS1/2 Selectors

All Selector - ("*") (Universal Selector)
jQuery Reference - Attribute Contains Prefix Selector - [attr|="value"] (Subcode Match)
jQuery Reference - Attribute Contains Word Selector - [attr~="value"](Word Match)
Attribute Equals Selector - [attr="value"] (Exact Match)
jQuery Reference - Child Selector - ("parent > child") (Child Match)
Class Selector - (".class") (Class Match)
Descendant Selector - ("ancestor descendant") (Descendant Match)
Element Selector - ("element") (Element Match)
jQuery Reference - First Child Selector- :first-child (First Child Match)
Has Attribute Selector - [attr] (Attribute Match)
ID Selector - ("#id") (ID Match)
Multiple Selector - ("selector1, selectorn") (Multiple Selector Match)
Next Adjacent Selector - ("previous + next") (Adjacent Sibling Match)

CSS3 Selectors

Attribute Contains Selector - [attr*="value"] (Substring Match)
jQuery Reference - Attribute Ends With Selector - [attr$="value"] (Suffix Match)
jQuery Reference - Attribute Starts With Selector - [attr^="value"] (Prefix Match)
jQuery Reference - Checked Selector - :checked (UI element states pseudo-class Match)
jQuery Reference - Disabled Selector - :disabled (UI element states pseudo-class Match)
jQuery Reference - Empty Selector - :empty (Childless Match)
jQuery Reference - Enabled Selector - :enabled (UI element states pseudo-class Match)
jQuery Reference - Last Child Selector - :last-child (Structural Pseudo-class Match)
jQuery Reference - Next Siblings Selector - ("prev ~ siblings") (General Sibling Match)
jQuery Reference - Not Selector - :not()() (Negation Pseudo-class Match)
jQuery Reference - Nth Child Selector - :nth-child() (Structural Pseudo-class Match)
jQuery Reference - Only Child Selector - :only-child (Structural Pseudo-class Match)