What is Starts-with and ends-with selectors in CSS?

CSSmarkup~5 mins

Starts-with and ends-with selectors in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

These selectors help you style elements based on how their attribute values start or end. It makes targeting specific elements easier without extra classes or IDs.

You want to style all links that start with 'https' differently from others.

You want to highlight images whose file names end with '.png'.

You want to change the color of buttons whose IDs start with 'btn-'.

You want to style input fields where the name attribute ends with 'email'.

Syntax

CSS

[attribute^="value"] { /* styles */ }
[attribute$="value"] { /* styles */ }

^= means 'starts with'.

$= means 'ends with'.

Examples

This styles all links (a) whose href attribute starts with "https" in green.

CSS

a[href^="https"] {
  color: green;
}

This adds a blue border to all images whose src attribute ends with ".png".

CSS

img[src$=".png"] {
  border: 2px solid blue;
}

This colors buttons orange if their id starts with "btn-".

CSS

button[id^="btn-"] {
  background-color: orange;
}

This makes input fields bold if their name attribute ends with "email".

CSS

input[name$="email"] {
  font-weight: bold;
}

Sample Program

This page shows how CSS styles elements based on attribute values that start or end with certain text. Green bold links start with "https". Blue bordered images end with ".png". Orange buttons have IDs starting with "btn-". Bold input fields have names ending with "email".

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Starts-with and Ends-with Selectors</title>
  <style>
    a[href^="https"] {
      color: green;
      font-weight: bold;
    }
    img[src$=".png"] {
      border: 3px solid blue;
      padding: 4px;
      max-width: 100px;
      display: block;
      margin-bottom: 1rem;
    }
    button[id^="btn-"] {
      background-color: orange;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
      margin-bottom: 1rem;
    }
    input[name$="email"] {
      font-weight: bold;
      border: 2px solid #333;
      padding: 0.3rem;
      margin-bottom: 1rem;
      display: block;
      width: 200px;
    }
  </style>
</head>
<body>
  <h1>Starts-with and Ends-with Selectors Demo</h1>
  <a href="https://example.com">Secure Link (https)</a><br />
  <a href="http://example.com">Regular Link (http)</a>
  <hr />
  <img src="flower.png" alt="Flower" />
  <img src="tree.jpg" alt="Tree" />
  <hr />
  <button id="btn-submit">Submit</button>
  <button id="cancel">Cancel</button>
  <hr />
  <input type="text" name="useremail" placeholder="Your email" />
  <input type="text" name="username" placeholder="Your name" />
</body>
</html>

OutputSuccess

Important Notes

These selectors only work with attributes, not with element text content.

They are case-sensitive, so "https" is different from "HTTPS".

Use browser DevTools to test and see which elements are matched by these selectors.

Summary

Starts-with selector targets elements whose attribute value begins with a specific string.

Ends-with selector targets elements whose attribute value ends with a specific string.

They help style elements easily without extra classes or IDs.