Example

CSS Attribute Selector

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
    <title>CSS Attribute Selector</title>

    <style>

        /* select all the elements with atttibute "class" */
        [class] {
            color:indigo;
        }

        /* select all the elements whose target atttibute has the value "_blank" */
        [target=_blank] {
            background-color: blue;
        }

        /* select every <a> element whose href attribute value ends with "com"  */
        a[href$='com'] {
            color: white;
        }

        /* select every <a> element whose title atttibute containing word "portal" */
        a[title~=portal] {
            background-color: darkcyan;
        }

    </style>

</head>
<body>

    <h1 class="heading">Demo: CSS Attribute Selector</h1>

    <p id="skillzam">Link to Skillzam Homepage :<a href="https://skilzam.com" target="_blank">Click here</a></p>
    
    <p id="workzam">Link to Workzam Homepage : <a href="http://workzam.com" title="Workzam Job search portal">Click here</a></p>

</body>
</html>

Output

View original