jQuery Selectors: The greater then gt selector

This entry is part 32 of 33 in the series jQuery Selectors

$(‘:gt(index)’)

The greater then gt selector will filter the list to include elements after a specific zero-based index.

We use $(‘p:gt(1)’) as an example.

There are 3 <p> elements in the example, only the last <p> element will be highlighted with yellow background.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML5</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script>
        $(function () {
            $('p:gt(1)').css('background-color', 'yellow');
        });
    </script>
</head>
<body>

<article>
    <header>
        <h1>Ushuaia</h1>

        <p>Ushuaia is the capital of Tierra del Fuego in Argentina</p>
    </header>
    <section>
        <p>It is commonly regarded as the southernmost city in the world.</p>

        <p>They also built a railway now a tourist attraction known as the End of the World Train</p>
    </section>
</article>

</body>
</html>

The less then lt will do the reverse of gt as shown by the link button below.

jQuery Selectors: Appending a li to an ul element

This entry is part 6 of 33 in the series jQuery Selectors

Using jQuery selector, we can append a <li> item to a <ul> list.

We can use the same selector ul.rock to append an item to the second list.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('ul.rock').append('<li>Tracy Chapman</li>');
        });
    </script>
</head>
<body>

<h4>British Pop</h4>
<ul>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
</ul>

<h4>American Rock</h4>
<ul class='rock'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>

jQuery Selectors: Introduction

This entry is part 1 of 33 in the series jQuery Selectors

jQuery selector is actually based on CSS selectors.  So knowing CSS selectors will definitely help in learning jQuery Selectors.

As in CSS selectors, jQuery selectors allow you to find HTML elements in many ways.

The most commonly used selectors are the basic ones.

The basic selectors focus on the ID attribute, class attribute, and tag name of HTML elements.

To use jQuery selector, simply use $(selector).

Some examples are $(‘h4’), $(‘p’) and $(‘a’).

CSS3 Selectors: Last-child

This entry is part 26 of 40 in the series CSS3 Selectors

E:last-child:- An E element, last child of its parent.

Its usage is similar to first-child.

In the example below, it selects the third paragraph under the <div> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
    <style>
        div#introduction p:last-child {
            color: blue;
            font-family: Arial;
        }
    </style>
</head>
<body>
<div id='introduction'>
    <p>Ushuaia is the capital of Tierra del Fuego, Antártida e Islas del Atlántico Sur Province.</p>

    <p>It is commonly regarded as the southernmost city in the world.</p>

    <p>Ushuaia is located in a wide bay on the southern coast of Isla Grande de Tierra del Fuego, bounded on the north
        by the Martial mountain range and on the south by the Beagle Channel.</p>

</div>
</body>
</html>

If you apply last child to a table:

 

 

CSS3 Selectors: An element that has an attribute with a value E[attr=val]

This entry is part 12 of 40 in the series CSS3 Selectors

E[attr=val]

Matches any element E that has the attribute attr with any value.

We use textarea[name=’comment’] as an example.  This will match the element to a multiline textbox.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <style>
        textarea[name='comment'] {
            border: 2px solid navy;
        }
    </style>
</head>
<body>
<br>
Name: <input type='text' name='name'>
<br>
Phone: <input type='text' name='phone'>
<br>

Comments:
<br>
<textarea name='comment' rows='3'></textarea>
</body>
</html>

If we use another attribute textarea[rows=’3′], it will still work.