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