How to Select Element with Specific Content or Attribute in CSS

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.

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']".

is it possible to select element with specific content or attribute in CSS?

If I understand you correctly, your selector would be something like this

a[href="yourlink"]

This will select one specific link in your footer that has "yourlink" in the href attribute
Is this what you want?

How to write a CSS Selector selecting elements NOT having a certain attribute?

I think more accurate CSS Selector is:

div[class]:not([style])>button

because the button element is a child of div element.

Hope it helps you!

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.

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 do I select a css element with a text not attached to the attribute?

CSS selectors don't work this way. There was something called :contains() but it was dropped. You could add a second class to each td element like this:

<td class="content action_yes"...>
<td class="content action_no"...>

Then your CSS selector would look like this (in jQuery only because it's so clean, this approach is standard CSS)

$('.action_yes')
$('.action_no')

How do I target elements with an attribute that has any value in CSS?

The following will match any anchor tag with a rel attribute defined:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

---

Update:
To account for the scenario @vsync mentioned, in the comment section (differentiating between emtpy/non-empty values), you could incorporate the CSS :not pseudo-class:

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Select elements by attribute in CSS

If you mean using an attribute selector, sure, why not:

[data-role="page"] {
    /* Styles */
}

There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature",

• browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and

• you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.

---

Related Topics