MMPS Quick Start

The Militant Moderates CSS Parent Selector (MMPS) plugin removes a basic limitation of CSS. Normally the style changes are applied only to the last element in the Selector. MMPS gives you a quick and easy way to assign the style changes to any element in the Selector. A normal CSS Selector becomes a Parent Selector simply by adding an exclamation mark ‘!’ in the right place.

MMPS also provides the ability to add your own custom CSS rules to your entire web site as well as to individual posts and pages. MMPS will look in its custom CSS rules for any Parent Selectors that may apply. Normally that is the only place MMPS checks, however you can set options that cause MMPS to include external CSS Stylesheet files and Inline CSS rules.

Frequently Asked Questions

When people reach this point, the most common questions on their mind are:


What are “Parent Selectors” and how do I use them?

Parent Selectors are a type of CSS Style Rule that lets you designate any of the HTML elements listed in the Selector as the target for the style changes specified.

Parent Selector rules are written exactly like normal CSS with one small change. In the Selector portion of the rule, you add a single exclamation mark ‘!’ at the end of the element that should be styled. For example, the following CSS rule will apply the style to the paragraph element:

div p { border: 1px solid black; }

This adds a single pixel border around the <p> paragraphs selected. Adding the exclamation mark after the <div> element in the Selector turns the rule into a Parent Selector:

div! p { border: 1px solid black; }

The new Parent Selector style rule will now put the border around the <div> elements instead of around the <p>.

Why do I want the Militant Moderates CSS Parent Selector Plugin?

The REALLY short answer is: It lets you do some really neat stuff with basic CSS. Stuff you can’t do without it. If you still want a longer short answer then keep reading.

MMPS is a very tiny but very useful enhancement to any WordPress™ installation. Whether you are designing a Theme for distribution or tweaking your own site, the limitations of standard CSS can sometimes drive you nutty.

MMPS came into life because of just such a roadblock in our own work. Once we built it, we liked it so much that we figured we’d share it with everyone else. It’s one of those tiny tools that does exactly what you need, doesn’t harass you while it’s doing it, and doesn’t take any complicated setup or configuration to install and use.

MMPS removes one of the more frustrating limitations in CSS design; its inability to apply styling to any element other than the last one matched. Even if your Style Selector has more than one Element, normal CSS limits you to applying style changes only to the last Element in the chain.

The MMPS plugin extends the standard CSS Selector Syntax slightly. Using the enhanced Parent Selector syntax, you can easily apply style changes to any Element specified by the Selector, not just the last one.

What are the Quick Instructions for using the Plugin?

You must download and install the MMPS plugin before you can start using it. Assuming you’ve already done those steps, it’s time to learn how it will ease your work with CSS and WordPress™. This is where it gets fun. Let’s start by looking at a standard CSS Style:

AA > BB > CC { style: setting; }

The first part is called the Selector. It determines which parts of a web page are styled. The stuff inside the curly braces ‘{‘ and ‘}’ is called the Declaration and it describes the style changes to apply.

The Style shown above makes changes to all <CC> elements contained inside a <BB> element that is itself contained inside an <AA> element. Even though it depends on a chain of elements from <AA> to <BB> to <CC>, the style changes are applied only to the <CC> element because it is the last element in the Selector. This is the problem, standard CSS limits you to applying style changes only to the last element in the Selector.

The Parent Selector Syntax

The MMPS Plugin overcomes that limitation by letting you apply the style changes to ANY element in the Selector. Here is a CSS Style that has been changed slightly to become a Parent Selector:

AA > BB! > CC { style: setting; }

The Parent Selector has been created by adding a single exclamation mark ‘!‘ to the <BB> element. As a result, the style changes specified by the Declaration will be applied to the <BB> element instead of the <CC> element.

Also notice that the style change will only be applied to those <BB> elements that are a child of an <AA> element and a parent of one or more <CC> elements. In other words, if the Selector doesn’t match without the exclamation mark, it won’t match with it either.

<style>
aa > bb! > cc { background-color: green; }
</style>

<aa>This section matches the style above
  <bb>This block gets a green background
    <cc>Innermost text</cc>
  </bb>
</aa>

<aa>This section will not match the style
  <bb>Block is NOT changed because it doesn't have an inner cc element
    <dd>This is the wrong type element so the Selector doesn't match</dd>
  </bb>
</aa>

<ee>This section won't match either
  <bb>Block is NOT changed because it isn't the child of an aa element
    <cc>Even though it DOES have an inner cc element</cc>
  </bb>
</ee>

A Simple Example

Suppose you want to highlight all paragraphs that contain a link to an in-page location. With normal CSS, you can only make style changes to the link but not to the paragraph. With Parent Selector CSS this becomes an easy task.

p! a[href^="#"] { background-color: #eee; }

We have added an exclamation mark ‘!‘ to the CSS Selector, turning it into a Parent Selector. Because it follows the <p> element, the style changes will be applied to all paragraphs that contain at least one in-page link and the styling is applied to the entire paragraph not just the link.

An Active Example

Standard CSS lets you make style changes based on events. For example you can change the background color of something when the mouse hovers over it. An Active Style might look like this:

span.pretty:hover { background-color: Fuchsia; }

This style says “when the mouse hovers over any <span> element with the Class pretty, change the <span>‘s background color to Fuchsia”. That’s neat but what if you want to apply the style change to the parent instead of the <span>? Even if you don’t care what the parent element is?

*! > span.pretty:hover { background-color: Fuchsia; }

We’ve added an asterisk or ‘Wildcard’ element before the <span>. The asterisk will match any element but only if it’s the direct parent of a <span> with the Class pretty. The exclamation mark after the asterisk turns it into a Parent Selector. This means that no matter what element comes before the <span>, it will receive the style changes specified.

This example also includes a :hover Pseudo Class on the <span> element. Like normal CSS, the style changes are only applied when the mouse hovers over the <span>. Unlike normal, the style changes will be applied to the <span>‘s parent instead of to the <span> itself.

*:hover! > span.pretty { background-color: MistyRose; }

This next example uses the same :hover Pseudo Class but this time attached to the parent of the <span>. The style changes will be applied to the parent element just as before, but now they are applied when the mouse hovers over the parent. Importantly those elements that do not contain at least one <span> with the Class pretty will not be affected.

Pseudo Elements in Parent Selectors

Pseudo Elements are used to add stuff to a web page with CSS only. They can also be used to specially modify the content already there. You often find them used to put a small icon or other decoration just before or after something on the page. They are useful, but the limitations of standard CSS tarnishes their appeal. Parent Selectors make those limitations go away.

When it comes to proper placement of styled content, sometimes the only feasible solution is to wrap it all in a new block then position things within the block. But this can be incredibly difficult if not impossible because a standard CSS Pseudo Element will only let you modify content in the last (or selected) element. MMPS extends that, allowing you to designate which element will be modified.

li:after! a { content:url('smiley.gif'); }

Even though this is a tiny change, it provides a lot of flexibility. It says basically “If any <li> elements contain <a> elements then put a smiley at the very end of the <li>.” That might not seem like a problem, but what if your HTML looks like this:

<li>To start <a href="somewhere.com">Click Here</a> then buckle up.</li>

Without the MMPS plugin and the use of Parent Selectors, the smiley will wind up pushing the text “then buckle up.” to the right. But with a Parent Selector, the smiley will be placed at the very end of the text and will not result in rearranging things too much. Visually much more appealing and probably a lot closer to what you expect it to do.

Where can I get the Plugin?

Thanks to the good efforts of the folks at WordPress.org, the MMPS Plugin is now available directly from their Plugin directory. The quickest way is to use the WordPress Plugin Manager. Select ‘Add New’ from the Plugins sub-menu then search for ‘CSS Parent Selector MMPS‘. (You can probably find it just with ‘MMPS‘ … but just in case.) You can also skip all the manual installation stuff and use the Plugin Manager to install it once you’ve found the right one.

You can also download a ZIP file directly from WordPress.org

How do I install the Plugin?

If you downloaded the ZIP file then you must install the MMPS Plugin files manually. So here are the manual instructions:

  1. Locate and open the folder that contains your existing WordPress Plugins : This is typically the wp-contents/plugins folder in the WordPress root folder. If your installation is different then adjust accordingly.
  2. Extract the distribution ZIP file into that folder : Extraction will create the necessary folders and populate them with the proper files.
  3. Activate the Plugin : Use the Plugin Manager to activate the new plugin named “Militant Moderates CSS Parent Selector MMPS”.

Please note that if you’re extracting the plugin onto your local computer, you still have to upload it to your WordPress installation before it will be visible in the Installed Plugins list.

Do I have to pay for MMPS to use it?

Absolutely NOT! The MMPS plugin is free to use. We like good software that comes for free and we want to believe we’re contributing back.

But if you WANT to pay something then we won’t stop you: Visit our Donations Page

Where to next?

We’ve provided a couple of pages with various examples of MMPS in action.