MooTools Pseudo Selectors Gone Wild

By  on  

Over the past few weeks, I've covered how you can create your own pseudo selectors in MooTools. In looking at jQuery's documentation and considering other often-checked element traits, I've created a bunch more useful MooTools pseudo selectors.

The MooTools JavaScript

/* grab "checked" elements */
Selectors.Pseudo.checked = function() {
	return ('input' == this.get('tag') && ('radio' == this.get('type') || 'checkbox' == this.get('type')) && this.checked);
};

/* grab "selected" option elements */
Selectors.Pseudo.selected = function() {
	return ('option' == this.get('tag') && this.selected);
};

/* grab random elements */
/* credit:  http://blog.kassens.net/custom-pseudo-selectors */
Selectors.Pseudo.random = function(probability, local) {
	return Math.random() < (probability || .5).toFloat();
};

/* grab elements with no value */
Selectors.Pseudo.noValue = function() {
	return '' === this.value;
}

/* grab elements with a specific empty attribute */
Selectors.Pseudo.emptyAttribute = function(att) {
	return this.get(att) == '';
}

/* grab disabled elements */
Selectors.Pseudo.disabled = function() {
	return this.disabled;
}

/* grab enabled elements */
Selectors.Pseudo.enabled = function() {
	return !this.disabled;
}

/* grab each type of input */
['text','password','radio','checkbox','submit','image','reset','button','file','hidden'].each(function(type) {
	Selectors.Pseudo.(type) = function() {
		return type == this.get('type') && 'input' == this.get('tag');
	}
});

/* form element ? */
Selectors.Pseudo.input = function() {
	return 'textarea' == this.get('tag') || 'select' == this.get('tag') || 'input' == this.get('tag') || 'button' == this.get('tag');
}

Have any more to add to the pile? Share them!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Multiple Backgrounds with CSS

    Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came...

  • By
    MooTools &#038; Printing &#8211; Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

Discussion

  1. Anton

    Without steering away from the subject too much, what about grabbing all elements that have an event attached to them?

  2. @Anton: Great question. I’ll be researching this very soon, as I too have interest in such a functionality.

  3. I am a RSS feed subscriber and I don’t miss a day without visiting this blog: your MooTools tips are tremendous! and this one is very useful!

    Thanks! :)

  4. Brett

    For selecting all headers in order. like jQuery: $(“:header”)

    Selectors.Pseudo.header = function() {
    return this.get('tag') == "h1" || this.get('tag') == "h2" || this.get('tag') == "h3" || this.get('tag') == "h4" || this.get('tag') == "h5" ||this.get('tag') == 'h6'
    }

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!