CSS Attribute Selector Does Not Work a Href

CSS attribute selector does not work a href

Use the $ after your href. This will make the attribute value to match the end of the string.

a[href$='.pdf'] { /*css*/ }

JSFiddle: http://jsfiddle.net/UG9ud/

E[foo]        an E element with a "foo" attribute (CSS 2)
E[foo="bar"]  an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"]  an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)

source: http://www.w3.org/TR/selectors/

CSS attribute selector does not work in Chrome

Our customers had similar (intermittent) issues after upgrading to Chrome 103.

After a lot of debugging and hair pulling I've discovered that Chrome simply discards [data-attribute] styles if there are 50 (or more) rules with [data-attribute] without any values ( as opposed to [data-attribute="foo"] working properly).

If you don't see a yellow background on this pen try to delete any [data-children] line from the CSS :-)

I've solved the issue by adding an invalid CSS rule and specify data attribute value in the selector:

[data-attribute="foo"] {
   bar: baz;
}

Value foo needs to exist in at least one place in your HTML.

CSS not() with attribute selector doesn't seem to work

You need to style all h2 element that are descendants of elements that are not [random-attribute~="value"] then style h2 that are.

It doesn't hurt to qualify the selector with a direct child combinator too.

Like so:

*:not([random-attribute~="value"]) > h2 {  color: red;}[random-attribute~="value"] > h2 {  color: blue;}

<div class="content">  <h2>Same valid selector, not working</h2>  <div random-attribute="value">    <h2>Valid selector turned blue.</h2>  </div></div>
<h2>some other heading</h2>

CSS attribute selector not working when the attribute is applied using javascript?

Because the selector you use, [style*="display: none;"], is looking for the presence of the exact string of "display: none;" in the style attribute, it requires the browser's JavaScript engine inserts that precise string, including the white-space character (incidentally in Chrome 39/Windows 8.1 it does). For your particular browser you may need to remove the space, and to target most¹ browsers, use both versions of the attribute-value string, giving:

.variations_button[style*="display: none;"] + div,
.variations_button[style*="display:none;"] + div

.variations_button[style*="display: none;"]+div,.variations_button[style*="display:none;"]+div {  color: red;}

<div class="variations_button" style="display: none;">asd</div><div>test</div>

Finding link using text in CSS Selector is not working

You are trying to locate a link by using the following CssSelectors:

• a[text='This is a link']
• a[innertext='This is a link']

As per Issue#987 and Issue#1547:

The :contains pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome (even outside WebDriver).

You can find a detailed discussion in selenium.common.exceptions.InvalidSelectorException with “span:contains('string')”

Solution

As per the HTML you can use either of the following solutions:

• CssSelector using the attribute title:

  "a[title='seleniumframework']"
  

• CssSelector using the attribute href:

  "a[href='http://www.seleniumframework.com']"
  

• CssSelector using the attributes title and href:

  "a[title='seleniumframework'][href='http://www.seleniumframework.com']"
  

Why does this CSS Attribute selector not work?

Because the space between the div and the data-endpoint attribute explicitly specifies that the element with that attribute is a descendant element of the div; remove the space and it works:

div[data-endpoint="/one/two/three/"] {display:none}

JS Fiddle demo.

References:

• CSS Selectors, at the W3.org

Attribute begin with selector not working

If you switch your classes round it seems to work:

<div class="kooy-tomato kooy">

It seems that div[class^="kooy-"] is only able to find the first class and does not look for a second class on an element like a <div> as the ^ only looks at the first item within the attribute

Here is a fiddle

How ever if you try div[class*="kooy-"] The * Looks at what is contained within the attribure

Here is a fiddle

If you want to know a bit more about the CSS attribure selector

CSS attribute selector not working as expected

You have one too many hrefs in there.

.ico-wrap:not([href*="/video/"])

DEMO: http://jsfiddle.net/w3kKM/

This will select elements without an href value, if you want to only select elements with an href, then you can do:

.ico-wrap[href]:not([href*="/video/"])

DEMO: http://jsfiddle.net/w3kKM/1/

---

Related Topics