CSS Selectors as Part of Understanding jQuery

Selectors are how you identify certain elements from others on the HTML page. They are a critical part of jQuery, because they give you the ability to manipulate each element property or call methods that change values. We showed you how to select elements based on ID or HTML tag, but there are several other selectors and ways you can distinguish each element from others. This article will show selectors and techniques to use them.

Introduction to CSS Selectors

You might wonder how CSS selectors are related to jQuery, but actually syntax and the CSS properties you use in your style sheets are similar to those in jQuery. If you have the tag name in CSS, then you can use it in your jQuery code.

Let's first take a look at a standard, common HTML tag.

<ul>

<li>Green</li>

</ul>

The HTML tag above is a standard unordered list. The "ul" tags denote that there is an unordered list contained in the opening and closing tags. The "li" tag elements are each item in the unordered list. You'll run into unordered and ordered lists often on websites. They provide numbered or bullet lists that list items down the page.

In the above example, the "ul" tag is the tag we want to work with, and we can use a CSS selector in our style sheet to change the way the unordered list displays on the page.

ul {

list-style: none;

border: solid 1px #ffffff;

}

In the above code, all HTML ul tags have a list style of "none" and a 1-pixel border that set to white. It doesn't matter what ul tag you place, they will all have these attributes.

You can get more selective by specifying a class name or an element ID. First, let's take a look at a class selector. A CSS class is no different than any other programming language class. The class defines the properties for an HTML element. You can have one or a dozen different properties defined in the class.

What makes a class specifier more useful is that you can create several classes for different property definitions and then apply the right one to your HTML elements. For instance, you could define a ul HTML element with a black border and one with a white border and then apply them as needed.

Let's take a look again at the HTML ul element used in the previous example, but let's then use a class specifier.

<li>Green</li>

</ul>

We've added the class property to the previous example, and we've given it the value "blackborder." However, we used the "ul" specifier in the previous CSS code example, so right now the properties won't be added to this particular unordered list. Now, we have to change the ul CSS class to reflect the class name. The code is below.

.blackborder {

list-style: none;

border: solid 1px #000000;

}

With the "blackborder" class defined in the CSS style sheet and in the ul element, the properties for the ul element are applied when the user loads the page. With a class name set, you can create several different classes and apply them to different unordered lists.

Let's create another class that defines a white border for an unordered list.

.blackborder {

list-style: none;

border: solid 1px #000000;

}

.whiteborder {

list-style: none;

border: solid 1px #ffffff;

}

Now we have two classes. We can apply one to the first unordered list and then the second one to another. Let's see the way the code looks.

<li>Green</li>

</ul>

Interested in learning more? Why not take an online JQuery Programming course?

<li>Green</li>

</ul>

Most CSS designers use classes instead of globally setting class properties by using the HTML element tag name. You can also create a global element class and then make sub-classes using your own custom names. This means that basic properties are set for all ul elements, and then you can override any of them to create custom classes that are then applied to other elements.

You can use multiple classes in one HTML element. You would want to use this method if you have multiple classes that define smaller parts of an element. For instance, you could have a ul class that defines a list style, and then two other classes that define the list's border.

Let's create two classes for borders and one class for the unordered list's style.

ul {

list-style: none;

}

.blackborder {

border: solid 1px #000000;

}

. whiteborder {

border: solid 1px #ffffff;

}

Notice that we created a global ul class for the list's style. Then, we created a "blackborder" class and a "whiteborder" class. This granular behavior lets you pick and choose different classes for different elements in your code. You can now specify a class or no class at all in your HTML tags and have the corresponding properties applied to these tags.

Take a look at the following HTML.

<ul>

<li>Green</li>

</ul>

<li>Green</li>

</ul>

<li>Green</li>

</ul>

The first ul element has no class specified, but the first CSS class we created was set to the ul specifier. Therefore, all three unordered lists have the ul properties assigned. We only have the list style set in the first class.

The second two unordered lists also have the ul properties applied, but they also have their respective classes defined. You can also apply multiple classes to an element. The following code uses multiple classes in one element.

<li>Green</li>

</ul>

In the code above, the unordered list uses three classes: whiteborder, extended-list, and another-class. We didn't define the last two classes, but you create these in the same way you would create the other classes that we've created.

The final common way to create a CSS selector is to use an ID specifier. Having an ID within an HTML tag isn't required, but it's standard programming procedure to have one for each element so that you can reference it using JavaScript or jQuery.

It's more common to use classes, but it's much more convenient to specify classes using IDs when you want to incorporate jQuery or JavaScript in your web pages. Take a look at the following CSS class.

#colors {

list-style: none;

border: solid 1px #000000;

}

The class name now has the hash symbol as a prefix. This symbol tells you that you want to apply the class to a specific element with the ID of "colors." Remember that every element must have a unique ID. If you have a duplicate ID regardless of the HTML tag, your code is not valid and can cause bugs in your jQuery calls. The HTML code will load properly, but any calls to duplicate IDs have unknown effects and can cause issues with your client-side scripts.

With the ID specifier in your CSS style sheet, you can then add the ID tag to any element and the class is automatically applied to it. The following code uses the new "colors" class.

<li>Green</li>

</ul>

The final method we'll cover is setting CSS classes based on an element tag name and its event. An event is fired when a user does an action on the web page. Take a hyperlink, for instance. The user can hover the mouse over the link and then click it. Both of these actions are an event. The hover event happens as long as the mouse is located over the link, and the click event happens when the user clicks the link.

In many applications, you want to customize the color of your links. The default link color is blue, but this might not match the color scheme of your site. Take a look at the following CSS style sheet class.

a:hover {

color: black;

}

We used a named color instead of the hexidecimal color code for black. In this example, when the user hovers over the hyperlink (the "a" tag in HTML), the color changes to black. You don't need to specify this class in your HTML hyperlink tags. It's a global class, because it uses the "a" tag with the "hover" event specifier.

The following HTML code is an example of a hyperlink tag.

<a href="test.com">Click Here</a>

The above code is a standard hyperlink. It points to "test.com" and the text that's shown to the user is "Click Here." The link will have the standard blue color if you copy and paste this hyperlink HTML code to your web page. However, if you hover over the link the color changes to black. When you remove the mouse icon from hovering over the link, it reverts back to blue. All of these events can be customized with your own color properties.

Using CSS Selectors with jQuery

With CSS selectors defined, you can now plug them into your jQuery code. Of course, jQuery code is much different than CSS.

First, you can select elements with a name value. The name attribute is similar to the ID HTML property. You give the element a name, and the name can be used in jQuery to reference it. Take a look at the following HTML code.

The above HTML code is four input text boxes. Suppose you want to select the ones with "color" in them to add text values. JQuery let's you reference all HTML elements with a specific name. The following code shows you how to do it.

$( "input[name*='color'" ).val( "This is a selected color input text box." );

</script>

Notice that the input HTML tag is specified, and then the "name*=" attribute is set. This tells the jQuery selector that you want to use the "name" attribute in your HTML tags. Then, the "color" text is specified. This tells the selector that you want to find all input text boxes that have "color" in their name attribute. The first parenthesis set with the dollar symbol is the selector.

Remember that you can chain methods in jQuery. We have one method set in this called. The "val" method sets the text value for the referenced selector. In the above example, two HTML input elements have the text "color" in them, so two of them will contain the value "This is a selected color input text box."

We can also use the ID attribute. In the previous section, we used the hash symbol to indicate that the CSS class should be applied to a specific HTML element with the given ID value. You will use this selector mainly with div containers. These containers let you format and organize your page elements. The following HTML code is a div container.

The div has no text or elements within it, so you see nothing if you load the page with this code. You can use jQuery to reference this div container and either make changes to its properties, add HTML code, or just add some text. The following code uses the css method to change the div's border to red.

$( "#testDiv" ).css( "border", "1px solid red" );

</script>

Again, we use the named color "red" instead of the hexadecimal code. The first parameter in the css method defines the attribute you want to change. The second parameter defines the attribute's value. With the hash symbol in front of the selector name, you tell jQuery to find the element with the name "testDiv."

Just like the ID hash symbol selector, you can select elements that use a specific CSS class. If you recall from the previous section, a CSS custom class name was preceded by a period ( ".") character. The same standard is used with jQuery selectors.

We can use the same div HTML used in the previous section. We'll use the following div tag as an example.

<div class="divClass"> This is a div container. </div>

In the above code, the class "divClass" is assigned to the container. You might want to dynamically assign a CSS class to this container, for example. You can do this using jQuery. The following code is jQuery script that can be used to edit the above div container.

$( ". divClass" ).css( "border", "1px solid red" );

</script>

In this example, the specifier in the selector is the "divClass" class. Notice that the period character is preceding the class name. This indicates that you want to specify a class an no other specifier. If you put a hash character in front of this name, jQuery would assume that you want an ID specifier. This is why it's important to use the right syntax when you use specifiers in your selectors.

The final selector that you need to know when you jump into jQuery is the global "all" selector. This selector lets you query and reference all elements on the page. . When you use the jQuery all attribute, you reference and select every element on the page. Be warned that this process is slow especially if you have a large DOM with several elements, but sometimes it's necessary so that you can get a collection of all elements on the page.

The "all" jQuery selector can be useful if you want to see the number of elements on the page, for instance. The following code shows you how to retrieve all elements on a page and count them. The count is then assigned to a variable.

var count = $( "*" ).length;

</script>

Notice the asterisk is used to query all elements and then the "length" property grabs the number of elements. This value is then assigned to the variable "count."

Selectors are a main component in jQuery programming. If you know CSS classes, you can more easily pick up on the way jQuery selectors work. Now that you know the basic selectors, you can move on to more advanced ones. The next section covers advanced CSS and jQuery selectors.