?Pure CSS cannot select elements based on text content, because the CSS standard does not support text content-based selectors such as: contains(); ? Classes or attributes should be used to accurately locate elements, which is a semantic and efficient approach; ? If you have to choose according to text, you can use JavaScript or jQuery to implement it; ?? Although modern browsers support the pseudo-class of: has(), it cannot directly match the plain text content and can only be indirectly matched through child elements or attributes. Therefore, the best practice is to reasonably use the principle of separation of HTML structure and style.

You can't directly select an element by its text content using pure CSS .

CSS is designed to style elements based on attributes like tag names, classes, IDs, states (like :hover ), and structural relationships — but it does not have a selector that matches elements based on their inner text (like "find me the <p></p> that contains 'Hello World'").

Why CSS Can't Do This

CSS lacks a selector such as :contains("text") in standard specifications. While jQuery has a :contains() selector, it's not part of standard CSS and won't work in regular stylesheets.

Example (this won't work in CSS):

 /* ? Invalid in standard CSS */
p:contains("Submit") {
  background: yellow;
}

Workarounds and Alternatives

1. Use Classes or Attributes instead

The best practice is to add a class, data attribute, or ID to the element you want to target.

 <button class="btn-submit">Submit</button>

 .btn-submit {
  background: blue;
  color: white;
}

This is clean, efficient, and maintainable.

2. Use :has() with Text (Limited Support)

In some modern browsers (like Chrome 105 ), you can use the * ` :has()` selector with certain conditions. However, you still can't match exactly text content* , but you can* check for elements that contain specific child elements or attributes.

But if the text is inside a child (eg, via ::before with content ), you can sometimes work around it:

 /* Example: Match a label that contains a span with text */
label:has(span[aria-label="required"]) {
  font-weight: bold;
}

Still, this doesn't help for direct text content matching.

3. Use JavaScript When Necessary

If you absolutely need to select an element by its text, use JavaScript:

 // Find a button with the text "Submit"
const submitButton = [...document.querySelectorAll('button')]
  .find(btn => btn.textContent.trim() === 'Submit');

if (submitButton) {
  submitButton.style.backgroundColor = 'yellow';
}

Or with :contains in jQuery (if you're using it):

 $('p:contains("Hello")').css('color', 'red');

Summary

• ? No native CSS selector can select elements by text content.
• ? Use classes or attributes — it's the proper semantic way.
• ? Use JavaScript or jQuery for dynamic text-based selection.
• ?? :has() is powerful but doesn't solve text-content matching directly.

So while the answer might feel limiting, relying on proper HTML structure with meaningful classes is usually cleaner and more performant anyway.

The above is the detailed content of How to select an element by its text content in CSS?. For more information, please follow other related articles on the PHP Chinese website!