2

I study about css in w3school . The css selectors table has rows :

[attribute|=value]

  • [lang|=en] Selects all elements with a lang attribute value starting with "en"

[attribute^=value]

  • a[src^="https"] Selects every element whose src attribute value begins with "https"

What differences between [attr |= value] and [attr ^= value] except double quotes ?

Improve this question
1

1 Answer 1

Reset to default
3

[attr|=value] Represents an element with an attribute name of attr whose value is a hyphen-separated list of words, one of which is exactly "value". It can be used for language subcode matches.

[attr^=value] Represents an element with an attribute name of attr and whose value is the prefixed by "value".

Have a look at w3fools

I recommend https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors and the whole MDN

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Almost :-) The question was about differences between |= and ^= but the OP can now read it for themselves ;-) Interestingly even on the W3's own page ^= isn't mentioned. +1 for also mentioning w3fools
@Havelock: Because ^= isn't in CSS2, it's in sel3: w3.org/TR/css3-selectors
This has nothing to do with double quotes by the way. It's just W3Schools being lazy and inconsistent.
Hmm, MDN says "one of which is exactly" but W3 says "beginning (from the left) with". Which one is correct?
@pimvdb: The W3C spec is correct. MDN is also inaccurate here, but thankfully Firefox implements it correctly anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.