Slick pseudo selectors

Find the squares!

by rpflorence

HTML

<button>Find the squares</button><br>
<div class=one>​​</div>
<div class=one>​​</div>
<div class=two>​</div>
<div class=one>​​</div>
<div class=two>​​</div>

CSS

div {
    float: left;
    border: solid 1px;
    margin: 1em;
}

.one {
    width: 100px;
    height: 100px;
}

.two {
    width: 150px;
    height: 100px;
}​

JavaScript

Slick.definePseudo('is-square', function() {
    var size = this.getSize();
    return (size.x === size.y);
});

$$('button')[0].addEvent('click', function() {
    $$('div:is-square').highlight();
});