jQuery Selectors: Class and ID selectors

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

When we were learning jQuery we have gone through some examples very similar to below.

Here we show how we can select elements based on class and ID.

The ID used here is #hide-button and the class is .red.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('#hide-button').click(function () {
                $('.red').hide();
            });
        });
    </script>
</head>
<body>
<h1 id='title' class='bold red'>The Headline</h1>

<div id='container'>
    Class and id selector.
    <p id='description' class='red'>The headline and this p will be hidden.</p>

    <p id='note' class='green'>This happens because of their class attribute's value.</p>
</div>
<button id='hide-button'>Hide elements!</button>
</body>
</html>

CSS3 Selectors: ID selectors

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

What makes attributes of type ID special is that no two such attributes can have the same value in a document.

An ID typed attribute can be used to uniquely identify its element.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
    <style>
        #city {
            font-family: sans-serif;
            color: purple;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h2>Taylor Swift</h2>

<p>Taylor Swift moved to <span id='city'>Nashville</span>, Tennessee, at the age of 14 to pursue a career in country
    music.</p>

</body>
</html>
Posted in

CSS: Classes and IDs for applying styles

This entry is part 7 of 26 in the series Basic CSS

Classes and IDs mark certain elements so that you can refer to them in your style sheet.

A class can be applied to multiple selections, whereas an ID uniquely identifies a specific selection.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Classes and IDs</title>
    <style type='text/css'>
        .rock {
            color: red;
        }

        #pop {
            color: navy;
        }
    </style>
</head>
<body>

<h3 class='rock'>The Stone Roses</h3>
<h4 id='pop'>Erasure</h4>

<p class='rock'>Oasis</p>
 
</body>
</html>
Notice we have applied a rock class to both <h3> and <p> tags.

To define a class, we use a . and to define an id, we use #.