What to Use Instead of Contains() in CSS3

Alternative to jQuery contains() Selector - is there an is() or equals() Selector?

Instead of using complex solutions, simply use .not() to deselect elements containing 'Not' or any other word don't wanna include ;-)

.not(":contains('Not')")

Your code should look something like this...

jQuery("td:contains('No')").not(":contains('Not')").css("background-color", "#FFBFBF");

Here's a snippet...

jQuery(document).ready(function() {    jQuery("td:contains('No')").not(":contains('Not')").css("background-color", "#FFBFBF");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h3> What for breakfast today? </h3><table border=1 cellspacing=0>  <tr>    <td>Tea</td>    <td>No</td>  </tr>  <tr>    <td>Coffee</td>    <td>No</td>  </tr>  <tr>    <td>Orange juice</td>    <td>Yeah</td>  </tr>  <tr>    <td>Champagne</td>    <td>Not for breakfast!</td>  </tr></table>

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.

Why doesn't the selector h3:nth-child(1):contains('a') work?

:contains() is not was going to be a CSS3 selector (thanks T.J. Crowder for the link), but it didn't make it, most likely because the way it works tends to lead to severe performance and over-selection issues. For example, if an element E matches :contains() for a given string argument, then all of its ancestors would also match; using it with a universal selector would lead to unexpected results with certain style properties, on top of being slow for the browser.

There is no other CSS selector that serves a purpose like :contains(). So you'll have to find some other way, either by modifying your HTML or even by using jQuery's :contains(), to achieve the effect you want:

Select an h3 element

if it is the first child of its parent

and its text contains the letter 'a'.

For jQuery and Selenium RC users: :contains() is implemented in the Sizzle selector engine used by jQuery, which is also used in Selenium RC (but not Selenium WebDriver). It works as described in this decade-old revision of the CSS3 spec, but again, due to how the spec describes it, you need to use it with care or it may lead to unexpected selections.

On a final note, h3:nth-child(1) can be replaced with h3:first-child, which as a CSS2 selector has better browser support.

CSS Contains Selector with a NOT qualifier?

:contains was deprecated in CSS3. Since WebDriver ties directly into the browser, it's unable to use that pseudo-class.

Is there any way to use only css to check and see if an element's innertext has something other than 0?

Unfortunately not. CSS really screwed Selenium users over with their deprecation of both :contains and :nth

As Arran said, you can use xpath, or - if you are willing to experiment with C# and CSS together (not just css as you state) then you can come up with something to loop x amount of times checking the text.

How to style parent when parent contains specific child?

:contains() was only intended to match elements containing certain text, not elements containing certain other elements. It is because of the complications associated with matching elements by text that there were almost no browser implementations, leading to :contains() being dropped from the spec.

Since there is no parent selector in CSS, and :has() (which does look at elements) only exists in jQuery, you won't be able to achieve this with CSS yet.

For the record, jQuery implements :contains() as well, but it does so according to the old spec, so it uses the name :has() for elements instead.

jquery use :contains to edit css for other divs

Actually your last line in the fiddle, is not correct. In place of this:

$(".readmorecircle:contains('Huge')").readmorecircle3().css("border", "2px solid #ffff00");

It should be this:

$(".readmorecircle:contains('Huge')").parent().css("border", "2px solid #ffff00");

Also, the HTML for the last is not correct. In place of this:

<div id="readmorecircle3"></div>
    <p class="readmorecircle">Huge</p>

It should be this:

<div id="readmorecircle3">
   <p class="readmorecircle">Huge</p>
</div> 

UPDATE:

if ($(".readmorecircle:contains('Huge')").length) {
    $("#readmorecircle3").css("border", "2px solid #ffff00");
}

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.

---

Related Topics