Siblings and Parents with MMPS

When you look at the internal structure of a typical web page, it looks something like a descending whirlpool into the abyss. At the upper levels it is wide and all encompassing; getting narrower as you travel deeper into the document. This type of nested structure makes building and maintaining web pages very easy, but it’s also very limiting.

There are times when you need to put things at the same level (or depth), one right after the other. A very common example of this is successive paragraphs on a page. None of them are inside of any of the others; they are all Siblings of each other.

CSS and Sibling Selection

Standard CSS has special “Relationship Delimiters” (also called Combinators) that describe how two adjacent Elements in a Selector are related to each other. You must use one of these special Delimiters to select Sibling elements with CSS. A common example is when you want to “tighten up” the first paragraph after a heading line.

p { margin-top: 12pt; }
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p { margin-top: 0pt; }

The first Style sets the default top margin to 12pt. The second Style sets the top margin to 0pt, but only if it is a <p> paragraph that is immediately preceded by an <h1><h2><h3><h4>, or <h5> heading.

This works very well when you’re traveling down the document tree, but traveling back up? That’s a whole different problem, and part of what MMPS does that’s so magic. (But magic takes your help too … with apologies to tinkerbell.)

Finding the Right Older Sibling

Siblings that appear earlier in the document are called Older Siblings. It is very easy for MMPS to get “lost” as it works its way up the document tree to find the proper Older Sibling. When that happens, it will pick the closest most logical element as the Parent and continue on. The result is the style changes will probably wind up in the wrong place.

WordPress™ is notorious for messing with the structure of an HTML page. In fact that’s its biggest strength. But it can also trip you up when you are trying to create Parent Selector style CSS Rules, especially when you throw in Siblings. Styles with specific Sibling Selectors are much better.

The following examples each have three sections, each section contains three paragraphs. The Parent Selector Styles that create the effects are shown immediately after each section.


Example 1 – Basic CSS Sibling Selectors

This first example uses standard CSS with Sibling Selectors to exactly specify which elements are being selected. This level of specificity makes it easier for MMPS to find its way back up.

Section 1 – Highlight Paragraph 1

First Paragraph

Second Paragraph

Third Paragraph

Section 1 – Highlight Paragraph 2

First Paragraph

Second Paragraph

Third Paragraph

Section 1 – Highlight Paragraph 3

First Paragraph

Second Paragraph

Third Paragraph

h3.para1 ~ p.paraX { background-color: #e0e0ff; font-style: italic; }

Example 2 – Style Older Siblings with Pseudo Class Events

The second example uses the click and hover Event Pseudo Classes to apply styling changes. The hover event triggers a background color change, and the click event puts text on the end. Both of them apply the style changes to an Older Sibling of the Selected element.

Section 2 – Highlight Paragraph 1

First Paragraph

Second Paragraph

Third Paragraph

Section 2 – Highlight Paragraph 2

First Paragraph

Second Paragraph

Third Paragraph

Section 2 – Highlight Paragraph 3

First Paragraph

Second Paragraph

Third Paragraph

h3.para2 ~ p.paraX::after { content: ' - Click here'; }
h3.para2! ~ p.paraX { font-style: italic; }
h3.para2! ~ p.paraX:hover { background-color: #ffe0e0; }
h3.para2::after! ~ p.paraX:click { content: ' *** After'; }

Example 3 – Parameterized Pseudo Classes in MMPS

The third example shows how CSS3-style Parameterized Pseudo Classes are handled by MMPS. Each section uses a a different CSS3 Pseudo Class to select the Target (or Selected) element.

Section 3 – Highlight Paragraph 1 using first-child

First Paragraph

Second Paragraph

Third Paragraph

Section 3 – Highlight Paragraph 2 using nth-child(2)

First Paragraph

Second Paragraph

Third Paragraph

Section 3 – Highlight Paragraph 3 using nth-last-child(1)

First Paragraph

Second Paragraph

Third Paragraph

h3.sect3.para1 + div p:first-child::after,
h3.sect3.para2 + div p:nth-child(2)::after,
h3.sect3.para3 + div p:nth-last-child(1)::after { content: ' - Hover here'; }
h3.sect3.para1! + div p:first-child:hover,
h3.sect3.para2! + div p:nth-child(2):hover,
h3.sect3.para3! + div p:nth-last-child(1):hover { background-color: #c0c0ff; font-style: italic; }

Where to next?

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