Q: How do these css selectors differ?
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
http://www.w3schools.com/cssref/css_selectors.asp
question: What is the difference between | and ^ ? Are they the same?
Likewise, what is the difference between ~ and * ? Are they the same?
Seems a little odd that | and ~ are included if they are the same. Seem like | and ~ were added in version 2. Decided to go with more conventional symbols of ^ and * in version three.
R
Mac mini, OS X Yosemite (10.10.5), Fall 2014; iPhone 4 7.1.2
Posted on Jun 13, 2016 12:11 PM

