Sel Attr Begin

## CSS3 [attribute^=value] Selector The `[attribute^=value]` selector is a powerful CSS attribute selector that allows you to target and style HTML elements based on whether their attribute value begins with a specified prefix. --- ## Definition and Usage The `[attribute^=value]` selector matches every element whose specified attribute value starts with a specified string. This is particularly useful for: * Styling links based on their protocol (e.g., targeting all secure links starting with `https://`). * Applying consistent styles to elements with structured naming conventions (e.g., classes starting with `btn-` or `test-`). * Targeting specific file types by matching the beginning of a path or identifier. --- ## Syntax ```css [attribute^="value"] { /* CSS properties */ } ``` * **`attribute`**: The name of the HTML attribute you want to target (e.g., `class`, `href`, `src`, `id`). * **`value`**: The prefix string you want to match at the beginning of the attribute's value. ### Selector Variations 1. **Global Attribute Match**: Matches any element with the specified attribute starting with the value. ```css [class^="test"] { ... } ``` 2. **Element-Specific Match**: Matches only specific elements (e.g., `div`) with the specified attribute starting with the value. ```css div[class^="test"] { ... } ``` --- ## Code Examples ### Example 1: Target Specific Elements (`div`) with Class Starting with "test" This example sets a yellow background color for all `

` elements whose `class` attribute value begins with `"test"`. ```css div[class^="test"] { background: #ffff00; } ``` #### HTML Structure: ```html

This div will have a yellow background.

This div will also have a yellow background.

Not matched (wrong element type).

Not matched (does not start with "test").

``` --- ### Example 2: Target Any Element with Class Starting with "test" This example targets *any* HTML element (not just `

`s) whose `class` attribute value begins with `"test"`. ```css [class^="test"] { background: #ffff00; } ``` #### HTML Structure: ```html

Matched div element

Matched paragraph element

``` --- ### Example 3: Practical Use Case (Styling Secure Links) A common real-world application is styling external or secure links differently by checking the `href` attribute. ```css /* Add a lock icon next to secure HTTPS links */ a[href^="https://"] { background: url('lock-icon.png') no-repeat left center; padding-left: 20px; } ``` --- ## Browser Support The `[attribute^=value]` selector is highly compatible and supported by all modern web browsers. | Browser | Supported Version | | :--- | :--- | | **Google Chrome** | Yes | | **Mozilla Firefox** | Yes | | **Safari** | Yes | | **Opera** | Yes | | **Internet Explorer** | IE8+ | > **Note for Internet Explorer 8:** To ensure the `[attribute^=value]` selector works correctly in IE8, you must declare a valid `` at the very beginning of your HTML document.

YouTip

Sel Attr Begin

📂 Categories