Get up to 80 % extra points for free! More info:

Lesson 7 - Selectors in jQuery, part two

In the previous lesson, Selectors in jQuery, part one, we started to examine jQuery selectors. In today's JavaScript tutorial, we'll continue and introduce more of them.

Preparing the document

As with the previous selectors, we'll demonstrate everything on the same HTML document. For completeness' sake, I'll put here its HTML and CSS parts again.

HTML

<ul id="web">
    <h2>WEB</h2>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>PHP</li>
    <li>ASP .NET</li>
    <li>JAVA</li>
</ul>
<ul id="desktop">
    <h2>DESKTOP</h2>
    <li>JAVA</li>
    <li>C# .NET</li>
    <li>VB .NET</li>
    <li>PYTHON</li>
    <li>PASCAL</li>
</ul>
<ul id="animals">
    <h2>ANIMALS</h2>
    <li>DOG</li>
    <li>CAT</li>
    <li>PARROT</li>
    <li>LION</li>
    <li>DRAGON</li>
    <li>TURTLE</li>
</ul>
<ul id="colors">
    <h2>COLORS</h2>
    <li>PINK</li>
    <li>BLUE</li>
    <li>BLACK</li>
    <li>GREEN</li>
</ul>
<ul id="nonsense">
    <h2>NONSENSE</h2>
    <li data-nonsense="69">69</li>
    <li data-nonsense="69 xoxo">69 xoxo</li>
    <li data-nonsense="69-nth">69-nth</li>
    <li data-nonsense="nu69kl tik">nu69kl tik</li>
    <li data-nonsense="hute 69p ui">hute 69p ui</li>
    <li data-nonsense="qwe 69rty" id="qwerty">qwe 69rty</li>
    <li data-nonsense="69 BIT">69 BIT</li>
    <li data-nonsense="party 69">party 69</li>
</ul>

CSS

body {
    background: #e5e5e5;
    color: #3d3d3d;
    margin: 0px;
    font-family: 'Open Sans';
}

* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style-type: none;
    border: 0px;
}

ul {
    float: left;
    padding: 10px 20px;
    text-align: center;
}

ul li {
    background : #CACACA;
    color      : #444;
    width      : 80px;
    border     : 2px solid #A6A6A6;
    margin     : 10px 0;
    padding    : 5px 10px;
    font-family: 'Open Sans';
    font-size  : 18px;
    text-align: left;
}

.green {
    background : #61E452;
    color      : #ededed;
    border     : 2px solid #1A7010;
}

.blue {
    background : #0080C0;
    color      : #ededed;
    border     : 2px solid #004080;
}

.yellow {
    background : #F4FF2F;
    color      : #444;
    border     : 2px solid #D0CB04;
}

.red {
    background : #ed1c24;
    color      : #ededed;
    border     : 2px solid #7f0011;
}

The page looks like this:

Your page
localhost

Pseudo selectors

Pseudo selectors are selectors which select elements according to some property.

$(":first-child")

The :first-child selector selects, as you can surely guess from its name, the first child or children of a given parent element or elements.

An example:

$("ul li:first-child").addClass("blue");

The result:

Your page
localhost

$(":first-of-type")

Using :first-of-type we can select the first element of a given type in a given parent element. The type can be e.g. a paragraph - p.

An example:

$("ul li:first-of-type").addClass("blue");

The result:

Your page
localhost

So what is the difference between :first-child and :first-of-type?

If we try to use these selectors in our example, we'll find that only :first-of-type works. It's because in our list the first element is always a heading. That means li:first-child is not in the list.

$(":last-child")

It's the opposite of :first-child, it selects the last element of a given parent element. As with all jQuery methods, it's possible to select multiple elements (e.g. the last elements from multiple lists). For the other methods and selectors we'll no longer mention this information.

An example:

$("ul li:last-child").addClass("blue");

The result:

Your page
localhost

$(":last-of-type")

The :last-of-type selector selects the last child of a given type from a given parent element.

An example:

$("ul li:last-of-type").addClass("blue"); // in our case the same effect as the last one

The result:

Your page
localhost

$(":nth-child(n)")

This selector selects the n-th child element in a given parent.

An example:

$("ul li:nth-child(3)").addClass("blue");

The result:

Your page
localhost

$(":nth-of-type(n)")

And now we'll select the n-th element of a given type.

An example:

$("ul li:nth-of-type(3)").addClass("blue");

The result:

Your page
localhost

$(":nth-last-child(n)")

This selector is similar to :nth-child(n) but here we select from the end.

An example:

$("ul li:nth-last-child(3)").addClass("blue");

The result:

Your page
localhost

$(":nth-last-of-type(n)")

As the previous selector, it selects from the end, but now only elements of a given type.

An example:

$("ul li:nth-last-of-type(3)").addClass("blue"); // in our case the same effect as the last one

The result:

Your page
localhost

$(":only-child")

The selector selects all the elements that are alone in a given parent element.

An example:

$("h2:only-child").addClass("blue");

The result:

Your page
localhost

$(":only-of-type")

A variant of the previous selector, there has to be a single element of a given type in a parent element. In this case, there can be elements of another types in the parent element.

An example:

$("h2:only-of-type").addClass("blue");

The result:

Your page
localhost

We can also include the special jQuery selectors here which are :lt(), :gt(), :odd, :even,:first, :last, and :eq(). But we'll talk about them next time.

Filtering content

At the end of today's lesson, we'll introduce selectors to filter the contents of a parent element.

$(":not()")

The :not() selector negates any selector. It selects elements that doesn't match it.

An example:

$("ul li:not([data-nonsense='69'])").addClass("blue");

The result:

Your page
localhost

$(":contains()")

This selector selects elements that contains a given substring (e.g. a word) in their inner text. Be careful about letter case, the selector is case-sensitive.

An example:

$("ul li:contains('A')").addClass("blue");

You can notice case-sensitivity in the last column where nothing containing a lower-case a is colored.

Your page
localhost

$(":empty")

The :empty selector selects elements that don't contain any text nor nested elements.

$(":checked")

This selector selects checked inputs of the radio or checkbox types.

We'll continue next time and complete jQuery selectors in the lesson Selectors in jQuery, part three.


 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 2x (2.12 kB)
Application includes source codes in language JavaScript

 

Previous article
Selectors in jQuery, part one
All articles in this section
jQuery Basics
Skip article
(not recommended)
Selectors in jQuery, part three
Article has been written for you by Honza Bittner
Avatar
User rating:
2 votes
Everything is possible.
Activities