TOOLS - CSS: Professional Techniques for Modern Layout - page 28

Figure 1-30: XRAY in action.

30

A similar tool with a dif erent purpose is MRI ( westciv.com/mri ), which lets you enter a
selector and then be shown which elements on the page that selector will select.

SELECTORACLE
h e name SelectORacle (see Figure 1-31) sounds like an advertisement for a database product,
but it isn't: Instead, it's an online tool that translates valid selectors into something resembling
regular English. (h e name comes from mashing “Selector” and “Oracle” together.)

Go to gallery.theopalgroup.com/selectoracle and enter one or many valid CSS
selectors, no matter how complex. Stick with English or switch the language to Spanish, and
then click the Explain h is! button. You'll get back an explanation of each selector you
entered. For example:

ul li:nth-child(2n+ 3) :not(:last-child)

...will get back the explanation:

Selects any li element that is an odd numbered child starting with the third child and that is
not a last child that is a descendant of a ul element.