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
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

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!