Can CSS3 Style Elements Based on Content?

How to Apply CSS Rules Based on Content

It is a common requirement to apply a specific style to elements that contain a certain word or phrase. While modern CSS has advanced capabilities, there is a specific aspect it cannot handle directly.

Can CSS3 Style Elements Based on Content?

The simple answer is no. CSS3 does not include a native selector that allows you to style elements based on their content. The proposed :contains selector, which would have enabled this functionality, was removed from the current Working Draft of CSS3 Selectors.

Alternative Solutions

To achieve content-based styling, you can use JavaScript. The following snippet demonstrates how to apply a red color to anchors that contain the word "SpecificWord":

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

This JavaScript code iterates through all anchor elements (document.links), checks if their innerHTML contains the desired word, and if true, applies the red color.

In conclusion, although CSS does not natively support content-based styling, you can use JavaScript to achieve similar results. This allows you to create fine-grained styling rules for elements that meet specific content requirements.

The above is the detailed content of Can CSS3 Style Elements Based on Content?. For more information, please follow other related articles on the PHP Chinese website!