dom - Use of Subcode matches and data info in a javascript selector engine -

hi using 'qwery" selector engine dustin diaz if clicked link, sample page shows selectors

div#baz.thunk a[-data-info*="hello world"] span + strong {}

and

#foo a[lang|=en] {} subcodes

i couldn't understand use of subcodes , data-info read css2 selector w3c page not comprehend it. explain using simple example how these works. notion of -data-info match innerhtml, dom properties of object below

<a href="http://www.google.com">hello</a> 

and when executed below selector give me above element.

qwery("a[-data-innerhtml='hello']"); 

please clarify notions , suggest me query write innerhtml/other properties using qwery selector engine

here article

http://www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part.html

http://www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part_17.html

extract:

here’s special 1 that’ll impress friends. not many people know trick. tilda (~) symbol allows target attribute has spaced-separated list of values.

going along our custom attribute number fifteen, above, create data-info attribute, can receive space-separated list of need make note of. in case, we’ll make note of external links , links images — example.

<a href="http://x.y.com/path/to/image.jpg"  data-info="external image">link image on server</a> 

with markup in place, can target tags have either of values, using ~ attributes selector trick.

/* target data-info attr contains value "external" */ a[data-info~="external"] {    color: red; }  /* , contain value "image" */ a[data-info~="image"] {   border: 1px solid black; }