Out of the Box

"Out of the Box" Hitches

With Hitch you receive a few plugins for free that are available right away.

• -hitch-has
• -hitch-allof (logical and)
• -hitch-noneof (logical nor)
• -hitch-oneof (logical xor)
• -hitch-anyof (logical or)

In the examples below imagine you have the following markup that you are applying rules against. It is a semantic break up of domestic and foreign cars, new and used as well as cheap and quality. The goal of all the example rules is to select cars or groups of cars based on different criteria.

Cars Markup

	<div class="cars">
		<div class="domestic">
			<div class="new"  id="a">
				<div class="cheap small efficient"><p class="car">2012 Ford Fiesta</p></div>
				<div class="quality efficient"><p class="car">2012 Chrysler 300</p></div>
				<div class="quality fast"><p class="car">2012 Dodge Charger</p></div>
			</div>
			<div class="used" id="b">
				<div class="cheap small efficient"><p class="car">2009 Ford Fiesta</p></div>
				<div class="cheap"><p class="car">2004 Chevy Malibu</p></div>
				<div class="quality fast"><p class="car">2010 Dodge Charger</p></div>
			</div>
		</div>
		<div class="foreign">
			<div class="new" id="c">
				<div class="cheap"><p class="car">2012 Kia Forte</p></div>
				<div class="quality"><p class="car">2012 BMW 525i</p></div>
			</div>
			<div class="used" id="d">
				<div class="cheap"><p class="car">2009 Kia Forte</p></div>
				<div class="cheap efficient"><p class="car">2005 Toyota Camry</p></div>
				<div class="quality"><p class="car">2009 Audi R5</p></div>
			</div>
		</div>
	</div>

:-hitch-has(selector)

The "has" hitch provides a way to filter elements based on whether or not they contain descendants which match the provided selector. As shown in the example below, the selector inside a has may begin with a combinator

Example:

    div:-hitch-has(>.fast)

This rule would match on:

<div class="new" id="a">
<div class="used" id="b">

Because because they meet the criteria that they contain (has) a child which is .fast.

:-hitch-allof(selector)

The "all of" hitch provides a way to filter elements based on whether they match ALL of the provided selector(s) (that is, selectors are AND'ed together) which may express different paths in the same tree.

Example:

.cars div:-hitch-allof(.new > div, .domestic .fast) p

This rule would match on:

<p class="car">2010 Dodge Charger</p>

Because it is both a <div> that is a child of .new AND is a descendant of .domestic and has the class .fast.

:-hitch-anyof(selector)

The "any of" hitch provides a way to filter elements based on whether they match ANY of the provided selector(s) (that is, selectors are OR'ed together) which may express different paths in the same tree.

Example:

.cars div:-hitch-anyof(.foreign .used, .domestic .new) .cheap p

This rule would match on:

<p class="car">2012 Ford Fiesta</p>
<p class="car">2009 Kia Forte</p>
<p class="car">2005 Toyota Camry</p>

Because each meets at least one of the criteria of being a descendant of .foreign that is .used OR a descendant of .domestic which is .new.

:-hitch-noneof(selector)

The "none of" hitch provides a way to filter elements based on whether they match NONE of the provided selector(s) (that is, selectors are NOR'ed together) which may express different paths in the same tree. Example:

.efficient:-hitch-noneof(.domestic .used, .foreign .new) p

This rule would match on:

<p class="car">2012 Ford Fiesta</p>
<p class="car">2012 Chrysler 300</p>
<p class="car">2005 Toyota Camry</o>

Because they are neither descendants of .domestic which are .used NOR descendants of .foreign which are .new.

:-hitch-oneof(selector)

provides a way to filter elements based on whether they match EXACTLY ONE of the provided selector(s) (that is, selectors are XOR'ed together) which may express different paths in the same tree.

Example:

.cars div:-hitch-oneof(.cheap, .small) p

This rule would match on:

<p class="car">2004 Chevy Malibu</p>
<p class="car">2012 Kia Forte</p>
<p class="car">2005 Toyota Camary</p>

Because they are .cheap OR .small exclusively (not both).