Question

Hi i am using ‘Qwery” selector engine by dustin diaz if you clicked that link, the sample page shows selectors like

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

and

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

i couldn’t understand the use of subcodes and data-info i even read the CSS2 selector w3c page but could not comprehend from it. Could someone explain using simple example how these works. My notion of -data-info is match innerHTML, Dom properties of a object like below

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

and when i executed the below selector it would give me the above element.

qwery("a[-data-innerHTML='Hello']");

please do clarify my notions and suggest me query to write to get the innerHTML/other properties using qwery selector engine

Answer 1

Here is a good 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 a special one that’ll impress
your friends. Not too many people know
about this trick. The tilda (~) symbol
allows us to target an attribute which
has a spaced-separated list of values.

Going along with our custom attribute
from number fifteen, above, we could
create a data-info attribute, which
can receive a space-separated list of
anything we need to make note of. In
this case, we’ll make note of external
links and links to images — just for
the example.

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

With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}