Css Selector Based on Element Text

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

CSS selector based on element text?

Not with CSS directly, you could set CSS properties via JavaScript based on the internal contents but in the end you would still need to be operating in the definitions of CSS.

How to select a specific text using CSS selector

CSS does not have any method like text. So in HTMLDOM, it is not possible at this point of time to locate the element based on text.

Moving further, You could do below in nightwatch.js

.useXpath().click('//span[contains(text(), "' + desiredText+ '")]')

and before calling this assign Auto-Publish to the desiredText variable.

I need CSS selector to select elements that contain a given text

CSS Selector doesn't support :contains() anymore. You have to use XPath "//div[text()='Clear search']".

CSS rule based on content

No. :contains was once proposed but is not in the current Working Draft of CSS3 Selectors.

You would need some JavaScript, for example:

for (var i= document.links.length; i-->0;)
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red';

How to write css selector to select an element based on element content

If you are asking if you can write a CSS selector that selects an element based on the elements containing text, then the answer is no, it cannot be done.

There is one case that selects based on the content, but that selector is :empty (and it can, obviously, only be used to select the element that has no content).

You will have to use a class, an attribute or some other way of distinguishing that anchor tag, and select it in that way.

---

Related Topics