jQuery Selector: Select elements where attribute attr=value

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

A way to use jQuery selectors is to select HTML elements by their attribute values.

Here we select a clear buton and when it is clicked, a message is displayed.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("input[value='Clear']").click(function () {
                $('.message').show();
            });
        });
    </script>
</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>
<br>
<input type='submit' value='Send'>
<input type='reset' value='Clear'>

<p class='message' style='display: none; color: grey'>Inputs Cleared</p>

</body>
</html>

CSS3 Selectors: Hyphen separated list of values E[attr|=val]

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

We look at a seldom used attribute E[attr|=val].

It matches any element E whose attribute attr either has the value val or begins with val-. This is most commonly used for the <lang>attribute (as in lang="en-us").

For example, p[lang|='en'] would match any paragraph that has been defined as being in English, whether it be UK or US English.

Note that in the example, we have used a class .lang as an element.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title></title>
    <style>
        .lang[lang|='en'] {
            color:blue;
        }
    </style>

</head>
<body>
<h3>Multi Languages Site</h3>

<p class='lang' lang='en-US'>This is in American English.</p>

<p class='lang' lang='en-GB'>This is in British English</p>
</body>
</html>

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.

CSS3 Selectors: An element with an attribute E[attr]

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

E[attr]:

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

This is especially good for formatting a form.

We use input[type] for textbox as an example.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <style>
        input[type] {
            border: 2px solid green;
        }
    </style>

</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>