CSS [attribute^=value] Selector

The [attribute^=value] selector is used to select those elements whose attribute value begins with a given attribute.

Syntax:

[attribute^=value] {
    // CSS Property
}

Example: In this example, The CSS selector p[class^=”for”] targets <p> elements with a class attribute that starts with “for” and applies a green background color and white text color.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>

        CSS [attribute^="value"] Selector

    </title>
 
    <!-- CSS property -->

    <style>

        p[class^="for"] {

            background: green;

            color: white;

        }

    </style>

</head>
 
<body>

    <h2>[attribute^=value] Selector</h2>
 
    <p class="GeeksforGeeks">GeeksforGeeks</p>

    <p class="forGeeks">A computer science portal</p>

    <p class="Geeks">Sudo GATE</p>

    <p class="for">Sudo placement</p>

</body>
 
</html>

Output:

Supported Browsers: The browser supported by [attribute^=value] selectors are listed below:

Google Chrome 4.0
Internet Explorer 7.0
Firefox 3.5
Safari 3.2
Opera 9.6

Article Tags :

CSS

Web Technologies

CSS-Selectors