These two [class^=test] and [class|=test] matches the same elements as I see.
Is there any real difference or case why should I use one over the other?
Asked
Active
Viewed 94 times
3
stackoverflow
- 1,303
- 2
- 21
- 36
-
2https://www.w3.org/TR/css3-selectors/#selectors – caramba Oct 19 '16 at 08:40
1 Answers
6
[class^="test"]
The above selects all elements that starts with class "test", it will fail to find if the test is second class.
But:
[class|="test"]
finding elements that matches class, won't show you if the class is "testing" but will find if the class is "test-ing", the above one will match both. Also , it will fail to find if the test is second class.
[class|="test-"]
And this case will only accept "test-" and won't accept "test-ing" or a string which starts with "test-", e.g., "test-ing".
Anson
- 489
- 7
- 12
Ultrazz008
- 1,678
- 1
- 13
- 26
-
Link to an official definition: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – deceze Oct 19 '16 at 08:40
-
-
@MrL I know, that's why I said "an". It's easier to digest than the actual official one. – deceze Oct 19 '16 at 12:12