Attribute Selector Patterns and Sibling Selectors

What Is It?

Attribute selectors can match whole values, whitespace-separated tokens, or value fragments. Sibling combinators select elements sharing the same parent.

Properties, Tags and Attributes Explained

• [attr]: Matches presence of an attribute.
• [attr^="value"] / [attr$="value"] / [attr*="value"]: Match values starting with, ending with, or containing a fragment.
• [attr~="token"]: Matches a token in a whitespace-separated attribute value.
• [attr|="en"]: Matches exactly en or a value beginning en-.
• [attr="value" i]: Requests ASCII case-insensitive value matching.
• A + B / A ~ B: Match the immediately following sibling B or any later sibling B of A.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Match URL fragments

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribute Selector Patterns and Sibling Selectors</title>
  <style>
    a[href^="https:"] { color: #15803d; }
    a[href$=".pdf"] { border-bottom: 3px solid #7c3aed; }
  </style>
</head>
<body>
  <p><a href="https://example.com">External HTTPS address</a></p><p><a href="lesson.pdf">PDF address (illustrative only)</a></p>
</body>
</html>

What you see: The HTTPS address is green and the PDF address has a strong bottom border. The sample PDF is not an included download.

Example 2: Later siblings

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribute Selector Patterns and Sibling Selectors</title>
  <style>
    h3 ~ p { background: #eff6ff; padding: 8px; }
    h3 + p { border-left: 4px solid #2563eb; }
  </style>
</head>
<body>
  <p>Before the heading</p><h3>Notes</h3><p>Immediately after</p><p>A later sibling</p>
</body>
</html>

What you see: Both later paragraphs receive a background, but only the immediately adjacent one has a border.

When and Where to Use It

Use attribute patterns for document-type cues or language-aware styling, and sibling combinators for local component relationships.

Common Mistake or Useful Tip

A URL suffix selector does not understand file types or query strings; lesson.pdf?download=1 does not end in .pdf.

Try It Yourself

Add a PDF URL with a query string and predict whether the suffix rule still matches.