Edit in JSFiddle

// This code is a bit meta-code-ish ... The result has plenty of demo fun for you, but feel free to goof with this stuff too ...
    

window.addEvent('domready',function(){

    var go = $('go');
    var test = $('test');
    
    var setText = function(selector){
        test.value = selector;
        go.fireEvent('click');
    };
    
    $('one').addEvent('click',function(){
        setText("$$('.one')");
    });

    $('two').addEvent('click',function(){
        setText("$('wrapper').getChildren()");
    });

    $('three').addEvent('click',function(){
        setText("$('wrapper').getElements('[class~=important]')");
    });
    
    $('four').addEvent('click',function(){
        setText("$('wrapper').getElements('[class*=important]')");
    });

    $('five').addEvent('click',function(){
        setText("$$('input[name=password]').getParent().getParent()");
    });
    
    go.addEvent('click',function(){
        var s = test.value + '.demo()';
        eval(s);
    });
    
});


// for the demo, irrelevant to the article

Element.implement({
    
    demo: function(){
        this.setStyles({
            'background': 'yellow'
        });
        this.setStyles.delay(2000, this,{
            'background': ''
        });
        return this;
    }
    
});

<div id="controls">
    <button id="one">.one</button>
    <button id="two">getChildren</button>
    <button id="three">[class~=important]</button>
    <button id="four">[class*=important]</button>
    <button id="five">getParent().getParent()</button>
    <p>
        Try your own:<br/>
        <input type="text" id="test" /> 
        <button id="go">Go</button>
    </p>
</div>

<div id="wrapper">
    <ul>
        <li class="one important">div#wrapper > ul > li.one.important</li>
        <li class="two notimportant">div#wrapper > ul > li.two.notimportant</li>
        <li class="three important" title="red">div#wrapper > ul > li[title=red].three.imporant</li>
    </ul>
    <form>
        <p>
            <input type="text" name="firstName" value="div#wrapper > form > p.important > input[type=text][name=firstName]" />
        </p>
        <p>
            <input class="one not-important" type="password" name="password" />
        </p>
    </form>
    <p class="one">div#wrapper > p.one<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p invalid-attribute="W3Chump" class="two">div#wrapper > p.one[invalid-attribute=W3Chump]<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

/* irrelevant */

div#controls {
    background: #ccc;
    padding: 10px;
    border: solid 1px #aaa;
}

body {
    font-family: helvetica, arial;
}

ul {
    padding-left: 2em;
    list-style: disc;
}

li {
    margin-bottom: 4px;
}

form, p, ul {
    margin-top: 1.5em;
    margin-bottome: 1.5em;
    line-height: 1.2em;
    font-size: 12px;
}

input {
    width: 70%;
}