Exploring Advanced Attribute Selectors in CSS

[attributename^="value"]

The [attribute^="value"] selector in CSS is an attribute selector that targets elements based on whether a specific attribute starts with a specified value.

[attribute^="value"]: This selector syntax consists of square brackets and an attribute name (attribute) followed by the ^= operator and the desired value (value). It selects elements that have an attribute (attribute) whose value begins with the specified value.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Attribute Selector</title>
    <style>
      p[class^="content"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>[attributename^=value] Selector</h3>
    <p>This selector represents an element with the "attribute name" attribute whose value begins with the prefix "content".</p>
    <p class="content">Tutor Joes - P1</p>
    <p class="left-content">Tutor Joes - P2</p>
    <p class="content-right">Tutor Joes - P3</p>
    <p class="contenttext">Tutor Joes - P4</p>
  </body>
</html>

Live Preview

This CSS rule uses an attribute selector with the ^= operator to select <p> elements whose class attribute starts with the string "content".

p[class^="content"]: This is the selector part of the rule. It targets all <p> elements that meet the condition specified within the square brackets.

[class^="content"]: This is the attribute selector. It specifies the condition for selecting elements. In this case, it's looking for <p> elements with a class attribute whose value starts with the string "content."

color: red;: This is the style declaration. It sets the color property of the selected <p> elements to red.