CSS SelectorsS2C Home « CSS Selectors

• <<    jQuery Core & Internals
• jQuery 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');
  });
}); 

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');
  });
}); 

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');
  });
}); 

: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:

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 3.5 Basics - Lesson 4: jQuery Selectors

What's Next?

In the next lesson we look at the jQuery selectors available for use in jQuery and how to use them.

• <<    jQuery Core & Internals
• jQuery Selectors     >>