What is the different between [att|=val] and [att~=val] in css

Question

I am facing very difficulty to understand these two different attribute in CSS [att|=val] and [att~=val]. Can anyone simply give me explanation for it

thanks

http://stackoverflow.com/questions/10442963/how-exactly-is-att-val-different-from-att-val-in-css-attribute-selectors — Saurabh Agrawal, Feb 09 '17 at 04:54
http://stackoverflow.com/questions/34530852/what-is-the-difference-between-pipe-and-caret-attribute-selectors — Michael Coker, Feb 09 '17 at 04:54
@P.S.F.Romesh With my knowledge `[attr|=val]` not there.Where did you find this type? — prasanth, Feb 09 '17 at 05:13
hi @prasad this is the link i got https://css-tricks.com/attribute-selectors/ thanks for reply — , Feb 09 '17 at 05:18
Gah @Michael Coker I thought those were the same, but it only partially answers it. — BoltClock, Feb 09 '17 at 05:23
http://www.w3schools.com/cssref/css_selectors.asp @P.S.F.Romesh see the all css selector reference with example — prasanth, Feb 09 '17 at 05:35

yaakov · Accepted Answer · 2018-07-10T00:16:43.270

3

[attr|=val] matches a word in val in any form, so [class=div] would match .my-div, .div, but not .mydiv.

[attr~=val] matches a complete word in val, so [class~=div] would match .div, but not .mydiv or .my-div.

Example:

HTML

<div id="myDiv"></div>
<div id="myDiv2"></div>
<div id="new-div"></div>

CSS

div[id|=myDiv] {
  /* Matches the first div */
}
div[id|=my]{
  matches first two divs
}
div[id|=new]{
  /* Matches second div - the hyphen counts as a word separator */
}
div[id~=Div]{
  /* Matches nothing - "Div" is not a separate word */
}

edited Jul 10 '18 at 00:16

answered Feb 09 '17 at 05:27

yaakov

4,568
4
27
51

1) It's [attr|=val] with a pipe, not [attr=val] 2) "contains" is a little vague, it helps to be very specific here since other attribute selectors exist that match values containing substrings. – BoltClock Feb 09 '17 at 05:47
1

This answer is not correct according to [MDN](https://developer.mozilla.org/nl/docs/Web/CSS/Attribute_selectors). You are confusing `[attr~=val]` with `[attr*=val]`, I think? – Just a student Feb 09 '17 at 15:12

What is the different between [att|=val] and [att~=val] in css

1 Answers1

Linked