rccharles

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

Close

Q: How do these css selectors differ?

  • All replies
  • Helpful answers