CODEWITHSUNDEEP
htmlcsscss-selectors
Shoaib Chikate
Shoaib Chikate

Reputation: 8975

Some selectors doesn't work for me

I was writing some selectors but it didn't work for me.

HTML code :

<h2 rel="singer-connector-cricketer">Shoaib Chikate</h2>
<h2 rel="dancer-build-tester">Ashok Dongare</h2>

CSS code:

h2[rel|="connector"]{
    color:blue;
}

CSS Tricks Attribute

Similarly another :matches() selector is also not working although I'm using higher version of chrome (Version 32.0.1700.77).

HTML code:

<div id="matcher">
        <p>Matched</p>
        <h1>Not</h1>
        <h2>Matched</h2>
        <h3>Not</h3>
</div>

CSS Code:

#matcher :matches(p,h2){
    color:purple;
}

How this selectors will work?

CSS tricks Selectors- :matches()

JSFIDDLE

Upvotes: 2

Views: 62

Answers (2)

BoltClock
BoltClock

Reputation: 723538

h2[rel|="connector"] looks for an attribute value that starts with "connector" followed by a hyphen. It does not look for an attribute value that has the word "connector" anywhere among a set of hyphenated words — the value must start with the given string.

Since the two elements given have rel attributes whose values start with "singer-" and "dancer-" respectively, neither of them will be matched.

I'm not aware of any version of Chrome that supports :matches() yet. The latest stable version (34.x as of this writing) does still support :-webkit-any(), however.

Of course, it should go without saying that you shouldn't use :-webkit-any() and the rest of the prefixes in production code, because CSS error handling rules mean that using it in its current prefixed state actually causes you to have to write duplicate rules for each prefix, which runs completely counter to its intended purpose. See this answer for an example. You can test these new selectors all you want, but there's very little to gain from trying to use them in production while support for them is still poor.

Upvotes: 4

Caelum
Caelum

Reputation: 448

I would try using #matcher :-moz-any(p,h2) and #matcher :-webkit-any(p,h2) instead of :matches cause there are only a few browsers supporting :matches at the moment.

See: http://jsfiddle.net/CUvZ8/2/

Upvotes: 1

Related Questions