Programming for beginners: CSS Attribute Selectors: Techniques for Styling Based on Attribute Values

Attribute selectors in CSS allow you to select elements based on the presence and value of attributes. They offer powerful ways to apply styles to elements with specific attributes or values.

Syntax

[attribute=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]

1. = (Equal to)

The = operator selects elements whose attribute value is equal to specified value.

equalTo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Example</title>
    <style>
        [title="Learning JavaScript"] {
            color: darkgreen;
            font-weight: bold;
        }

        a[title="HTML Basics"] {
            color: darkred;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="#" title="Learn CSS">CSS Tutorial</a><br /><br />
    <a href="#" title="Learning JavaScript">JavaScript Tutorial</a><br /><br />
    <a href="#" title="HTML Basics">HTML Tutorial</a><br /><br />
</body>
</html>

Above snippet generate below screen.

2. ^= (Starts with)

The ^= operator selects elements whose attribute value starts with a specified value.

startsWith.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Example</title>
    <style>
        [title^="Learn"] {
            color: darkgreen;
            font-weight: bold;
        }

        a[title^="HTML"] {
            color: darkred;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="#" title="Learn CSS">CSS Tutorial</a><br /><br />
    <a href="#" title="Learning JavaScript">JavaScript Tutorial</a><br /><br />
    <a href="#" title="HTML Basics">HTML Tutorial</a><br /><br />
</body>
</html>

Above snippet generate below screen.

3. $= (Ends with)

The $= operator selects elements whose attribute value ends with a specified value.

endsWith.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Example</title>
    <style>
        [title$="Script"] {
            color: darkgreen;
            font-weight: bold;
        }

        a[title$="Basics"] {
            color: darkred;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="#" title="Learn CSS">CSS Tutorial</a><br /><br />
    <a href="#" title="Learning JavaScript">JavaScript Tutorial</a><br /><br />
    <a href="#" title="HTML Basics">HTML Tutorial</a><br /><br />
</body>
</html>

Above snippet generate below screen.

4. *= (Contains)

The *= operator selects elements whose attribute value contains a specified value.

contains.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Example</title>
    <style>
        [title*="arn"] {
            color: darkgreen;
            font-weight: bold;
        }

        a[title*="sic"] {
            color: darkred;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="#" title="Learn CSS">CSS Tutorial</a><br /><br />
    <a href="#" title="Learning JavaScript">JavaScript Tutorial</a><br /><br />
    <a href="#" title="HTML Basics">HTML Tutorial</a><br /><br />
</body>
</html>

Above snippet generate below screen.

In summary

1. [attribute=value]: Selects elements with attribute values equal to the specified value.

2. [attribute^=value]: Selects elements with attribute values starting with the specified value.

3. [attribute$=value]: Selects elements with attribute values ending with the specified value.

4. [attribute*=value]: Selects elements with attribute values containing the specified value.

Previous Next Home

Programming for beginners

Wednesday, 13 November 2024

CSS Attribute Selectors: Techniques for Styling Based on Attribute Values

No comments:

Post a Comment