Introduction

No, standard CSS does not have a selector that matches elements based on their text content. CSS selectors work with structure, attributes, states, and relationships in the DOM, but not with the actual text nodes inside an element.

Why CSS Cannot Select by Text

CSS was designed as a styling language, not as a general DOM query language. That is why selectors can match things such as:

• element names
• classes
• ids
• attributes
• sibling and parent-child relationships
• pseudo-classes such as :hover and :focus

But they cannot ask a question like "select every paragraph whose text contains warning."

What CSS Can Do Instead

If you control the markup, the usual solution is to add a class or data attribute that represents the semantic state you want to style.

<p class="message warning">Disk space low</p>
<p class="message">Backup completed</p>

1.warning {
2  color: red;
3  font-weight: bold;
4}

This is the cleanest approach because the styling rule depends on explicit structure rather than fragile text content.

Use JavaScript When Text Really Matters

If the condition truly depends on the text content, use JavaScript to inspect the DOM and then add a class.

1<ul>
2  <li>Normal item</li>
3  <li>Warning: quota exceeded</li>
4</ul>
5
6<script>
7  for (const item of document.querySelectorAll("li")) {
8    if (item.textContent.includes("Warning")) {
9      item.classList.add("warning");
10    }
11  }
12</script>

.warning {
  color: red;
}

This keeps the text inspection in JavaScript, where content-based logic belongs.

jQuery and Testing Tools Are Not CSS

Some developers have seen syntax like :contains("text") and assume it is CSS. It is not part of standard CSS. It exists in tools such as jQuery selectors and in some testing frameworks, but browsers do not support it as a normal CSS selector.

// jQuery example, not standard CSS
$("div:contains('Warning')").addClass("warning");

That can be useful in a jQuery-heavy codebase, but it should not be described as native CSS capability.

What About :has()

Modern CSS now supports :has() in many environments, but that still does not let you match raw text content. :has() can select based on descendant elements or structural conditions, not text nodes.

article:has(.error-badge) {
  border-color: red;
}

This is powerful, but it does not solve the "contains certain text" problem.

Better Markup Usually Solves the Real Problem

If you feel the need to style elements by their text, that often points to markup that is missing semantic hooks. A class, attribute, or state value is usually a more reliable target than a literal string in the UI.

For example, this is better than relying on text:

<p data-status="warning">Disk space low</p>

[data-status="warning"] {
  color: red;
}

Now the style is stable even if the message text changes for localization or wording updates.

Common Pitfalls

The biggest pitfall is confusing jQuery selectors or test framework locators with CSS itself. They may look similar, but they are different query languages.

Another issue is trying to use generated content or attribute selectors as a workaround when the real condition is still the element's inner text. CSS cannot inspect arbitrary text nodes for matching.

Developers also forget about localization. If a style depends on a visible string, the rule becomes fragile the moment the application supports multiple languages.

Finally, do not abuse JavaScript text scanning when the right fix is to add semantic classes or data attributes on the server or in the component that renders the markup.

Summary

• Standard CSS cannot select elements by their text content.
• Use classes or data attributes when you control the markup.
• Use JavaScript if the styling decision genuinely depends on text.
• jQuery's :contains() is not a standard CSS selector.
• ':has() is structural and still does not provide text-content matching.'