Yes, you can use the :contains() pseudo-class in CSS to find elements by text content. 1. The syntax is element:contains("text"), targeting any element containing the specified text. 2. It performs case-sensitive and partial matches by default, meaning it will match if the text appears anywhere within the element. 3. For exact or case-insensitive matching, JavaScript must be used, as CSS alone doesn’t support these capabilities. 4. You can combine :contains() with other selectors like classes, IDs, or nested elements for more specific targeting. 5. Limitations include inconsistent support in some older or mobile browsers and lack of precision for exact text matches. In such cases, alternatives like JavaScript offer greater control and reliability.

Yes, you can find an element by its text content using only CSS selectors — but with some limitations. CSS has a :contains() pseudo-class selector that allows you to target elements based on their text content.

Here’s how it works:

div:contains("Hello")

This selector will match any <div> that contains the text "Hello" anywhere inside it.

Important Notes:

• The :contains() selector is case-sensitive.
• It matches elements where the text appears anywhere within the element, not just as a direct child.
• This selector is supported in most modern browsers (including Chrome, Firefox, and Edge), but may not be supported in older versions or certain environments like some mobile browsers.

How to Use :contains() Effectively

1. Targeting Elements Based on Exact Text

If you want to match an element that contains exactly the text you're looking for, keep in mind that :contains() does partial matches by default. For example:

p:contains("apple")

This will match any paragraph containing "apple", even if the full text is "I like applesauce."

To simulate an exact match, you'd need JavaScript or another method, since CSS alone doesn't support exact text matching.

2. Combining with Other Selectors

You can combine :contains() with other CSS selectors to narrow down your targeting:

li:contains("Home") a

This would select anchor tags inside list items that contain the word "Home".

3. Using With Classes or IDs

Sometimes you'll want to refine your selection further by combining with class names or IDs:

.button:contains("Submit")

This targets elements with the class .button that also contain the text "Submit".

When to Consider Alternatives

While :contains() is useful, there are situations where it might not be the best choice:

• If you need case-insensitive matching, CSS won’t help directly — you’ll need JavaScript.
• If you're working in environments that don’t fully support :contains(), such as some older frameworks or tools.
• For exact string matching, especially when partial matches could be misleading.

In those cases, using JavaScript methods like document.querySelector with textContent checks might give you more control.

Final Thoughts

The :contains() pseudo-class is a handy tool when you want to style or manipulate elements based on their text content without writing extra JavaScript. Just be aware of its behavior and limitations. It's simple and effective for many use cases, but not always perfect for precision work.

That’s basically it — nothing too complicated, but easy to overlook some of the nuances.

The above is the detailed content of Can you find an element by its text content using only CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!