Some selectors doesn't work for me

Question

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

What's the exact version of Chrome you're using? Please don't just say "higher version". If you're using Canary, say so. — BoltClock, Apr 14 '14 at 11:56

score 4 · Accepted Answer · edited May 23 '17 at 12:05

4

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.

edited May 23 '17 at 12:05

Community

1
1

answered Apr 14 '14 at 11:56

BoltClock

700,868
160
1,392
1,356

starts with is `^=`. `|=` is a word contained in the attribute – Fabrizio Calderan Apr 14 '14 at 12:00
3

@Fabrizio Calderan: No, `|=` has a "starts-with" restriction as well. See http://www.w3.org/TR/CSS21/selector.html#matching-attrs and http://www.w3.org/TR/css3-selectors/#attribute-representation – BoltClock Apr 14 '14 at 12:02
Oh, You're absolutely right "*...or beginning with "val"...*" I never noticed this behaviour. That's why I like SO, There's always something new to learn. – Fabrizio Calderan Apr 14 '14 at 12:04
|= checks for '-' as seperator so your answer doesn't provide me solution. – Shoaib Chikate Apr 14 '14 at 12:21
@Shoaib Chikate: You never said anything about a solution - in fact, looking at your question again, you haven't actually asked anything, so it should have been closed instead of answered. – BoltClock Apr 14 '14 at 12:23
Yes makes sense, I just want this selectors to work and in my question I said some selectors are not working and ask why they are not?? – Shoaib Chikate Apr 14 '14 at 12:26
@Shoaib Chikate: Just saw your comment on Julian's answer. So, I'm confused - are you looking for an explanation or a solution? – BoltClock Apr 14 '14 at 12:26
I got the solution. Explaination is fine. I was confuse when I saw the first answer. Its fine now. – Shoaib Chikate Apr 14 '14 at 12:28

score 1 · Answer 2 · answered Apr 14 '14 at 12:00

1

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/

answered Apr 14 '14 at 12:00

Caelum

428
3
9

But the another selector h2[rel*="connector"] is not solution because my question is why the selector which I have used it is not working. – Shoaib Chikate Apr 14 '14 at 12:20

Some selectors doesn't work for me

2 Answers2