I gave Pseudoselectors in MooTools a thought after reading Jan's Blog and was all about creating custom Pseudoselectors.

I first tried a simple example implementing the Pseudoselector "width" that checks for a certain width of an element and returns it. So div:width(100) returned all elements bigger than 100 Pixels. After further improving the Pseudoselector I came up with different Pseudoselectors to check for the dimensions of an element.

I've added the following selectors

• div:width(100) - Selects div elements with a size of 100px
• div:height(>=150) - Selects div elements with a height bigger or same as 150px
• div:left(<100) - Selects div elements that are positioned left by less than 100px
• ...
  

Note that those selectors rely on the actual size of an element, this includes padding, borders and more.

I extended those with selectors to check for a given CSS-Style:

• div:display(block):position(relative)
• div:position(absolute):left(>=100)
• div:opacity(0.5)

While I kept the CSS selectors simple for performance reasons the dimension selectors may take some more time to compute.

Example

However, those extensions are not recommended to be used on big pages and are maybe only useful for an already specified selector that reduces the number of initial results: For example if you have 10 elements inside "div.content" and want to show the elements that are currently set as "display: none" you can do

$$("div.content div:display(none)").setStyle("display", "block");

which may be faster than

$$("div.content div").setStyle("display", "block");

depending of the number of shown and hidden div elements inside "div.content".

Download JavaScript-File

Note: never use the selector like "div:width(>10)" on a big page. This could be really slow and is not recommended!

Drop me a line if you have any further improvements or real usecases =)