What does "a[href*=#]:not([href=#])" code mean?

Demystifying CSS Selector: a[href*=#]:not([href=#])

Unpack the meaning and practical applications of the powerful CSS selector a[href*=#]:not([href=#]), commonly used for styling internal page links.

In the world of CSS, selectors are the tools we use to target specific HTML elements for styling. While many selectors are straightforward, some can appear cryptic at first glance. The selector a[href*=#]:not([href=#]) is one such example. This article will break down each component of this selector, explain its purpose, and demonstrate how it's typically used to style anchor links that point to specific sections within the same page.

Understanding the Components

To fully grasp the selector's functionality, let's dissect it into its individual parts. Each segment plays a crucial role in narrowing down the selection to precisely the elements we intend to target.

flowchart TD
    A["Start with all `<a>` elements"]
    B["Filter: `[href*=#]` (href attribute contains '#')"]
    C["Filter: `:not([href=#])` (href attribute is NOT exactly '#')"]
    D["Result: Internal page links (e.g., #section1)"]

    A --> B
    B --> C
    C --> D

Breakdown of the CSS selector's filtering process.

1. a - The Element Selector

The first part, a, is a simple type selector. It targets all <a> (anchor) elements in the HTML document. Anchor elements are primarily used for creating hyperlinks, allowing users to navigate to other pages or to specific sections within the current page.

<!-- Examples of <a> elements -->
<a href="https://example.com">External Link</a>
<a href="#section1">Internal Link</a>
<a href="#">Placeholder Link</a>

Various types of <a> elements.

2. [href*=#] - The Attribute Selector (Contains)

This is an attribute selector. href specifies that we are looking at the href attribute of the <a> element. The *= operator means 'contains'. So, [href*=#] selects all <a> elements whose href attribute contains the hash symbol (#).

Why is this important? The hash symbol is conventionally used in URLs to denote a fragment identifier, which points to a specific section or ID within a document. Links like #section1, #top, or #footer all contain a hash. This part of the selector effectively filters out external links (e.g., https://example.com) and keeps only those that might be internal page links or placeholder links.

3. :not([href=#]) - The Negation Pseudo-class

The final piece, :not([href=#]), is a negation pseudo-class combined with another attribute selector. The :not() pseudo-class excludes elements that match the argument inside its parentheses.

Here, the argument is [href=#], which selects <a> elements whose href attribute is exactly #. A link with href="#" is often used as a placeholder or a 'no-op' link, especially in JavaScript-driven interfaces where the actual navigation is handled by a script, or when a link is temporarily inactive. By negating this, :not([href=#]) ensures that we exclude these placeholder links.

Combining these, this part of the selector means: 'select <a> elements that do not have an href attribute exactly equal to #'.

Putting It All Together: a[href*=#]:not([href=#])

When combined, a[href*=#]:not([href=#]) precisely targets <a> elements that:

1. Are anchor tags (a).
2. Have an href attribute that contains a hash symbol (#).
3. Do not have an href attribute that is exactly #.

This combination effectively selects all <a> elements that are intended to be internal page links (e.g., <a href="#section1">Go to Section 1</a>), while ignoring external links and placeholder links that just have href="#".

/* This CSS will only apply to internal page links */
a[href*="#"]:not([href="#"]) {
  color: #007bff; /* Blue text */
  text-decoration: underline dotted;
  font-weight: bold;
}

/* Example of other links that would NOT be affected */
a[href="https://example.com"] {
  color: green;
}

a[href="#"] {
  cursor: not-allowed;
  opacity: 0.6;
}

Practical CSS application of the selector.

Why Use This Selector?

This selector is particularly useful for applying distinct styles to internal navigation links. For instance, you might want to give internal 'jump to section' links a different color, underline style, or even an icon to visually distinguish them from external links or inactive placeholders. This enhances user experience by providing clear visual cues about the link's destination type.