Can You Style Anchors Based on Their Content Using CSS Alone?

CSS Rule Targeting Content-Based Selectors

The question arises whether it is possible to apply distinct styles to anchors containing a specific word using pure CSS, including CSS3. Due to technical limitations, CSS alone lacks the functionality to select elements based on their content.

Explanation:

While the ":contains" selector was once proposed as a potential solution, it has not been incorporated into the CSS3 Selectors Working Draft. Therefore, using CSS exclusively to target elements based on their content is not feasible.

Alternative Approach:

As a workaround, JavaScript can be employed to implement this functionality. One approach would involve iterating through all anchors on a page and testing their inner HTML for the presence of the desired word using regular expressions. If a match is found, the anchor's style can be modified accordingly.

Code Example:

The following JavaScript code demonstrates how this can be achieved:

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

In this example, all anchors on the page are iterated over, and if an anchor's inner HTML contains the word "SpecificWord" (case-insensitive), its color is set to red.

Note:

While there is no direct solution within pure CSS, JavaScript provides a flexible workaround for applying content-based styling.

The above is the detailed content of Can You Style Anchors Based on Their Content Using CSS Alone?. For more information, please follow other related articles on the PHP Chinese website!