CSS3 Selectors: Type selector

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

A type selector represents an instance of the HTML element type in the document structure.

This is the simplest of the selectors.  An example is h2 and p illustrated in the example below.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Codecrawl.com</title>
    <style>
        h2 {
            color: blue;
        }

        p {
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>
<h2>Taylor Swift</h2>

<p> Swift moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music.</p>
</body>
</html>

jQuery: More selectors

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

For a beginner in jQuery programming, you will probably find that the 3 methods based on HTML elements, IDs and classes mentioned in the earlier post will be sufficed.

For a more thorough treatment of jQuery selectors, you can refer to this guide.

Nonetheless, we will go ahead and list down some common selectors.

ExampleDescription
$('*')Selects all elements
$('#demo_id')Selects elements with id='demo_id'
$('.demo_class')Selects all elements with class='demo_class'
$('p')All <p> elements
$('ul li:first')This selector gets only the first <li> element of the <ul>
$('li:not(.myclass)')Selects all elements matched by <li> that do not have class='myclass'.

 

jQuery: Selectors

This entry is part 5 of 33 in the series jQuery Tutorial

JQuery selectors, together with handling of events in a page, are probably the most important components of jQuery.

The core of the jQuery library allows you to find DOM elements using CSS selector syntax and run methods on that collection.

The format of the jQuery selector is:

$(selector).html()

jQuery selectors can be based on:

  1. The HTML elements such as p, h1, h2, div.
  2. The id as in the demo id used in the earlier example.
  3. Class

An example selector based in a HTML element:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('p').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<p>I will be changed</p>
<h4>I will not be changed</h4>
<p>I will be changed</p>
</body>
</html>

Try The Code

An example based in class:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.demo_class').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<p class='demo_class'>I will be changed</p>
<h4 class='demo_class'>I will be changed</h4>
<p>I will not be changed</p>
</body>
</html>
Try The Code