Shameless Plug Time

June 23, 2015 by
Filed under: Man Behind the Curtain 

Militant Moderates CSS Parent Selector MMPSWordPress™ is one of the most popular and robust CMS available today. Even better is its price: Free. Lots of people use it to host their own blogs, documentation, even their whole web site. In fact, the DGP4SL Blog (this stuff you’re reading now) is built using WordPress.

But as neat as it is, there are times when the limitations of HTML and CSS just run you right off the road. Something that seems like it ought to be way easy, turns out to be far closer to impossible. I ran into one of those limitations not too long ago. But I’m an idiot, so I didn’t stop there.

Cascading Style Sheets … From HELL!

Sometimes you’re going for a look, or a special behavior, and the only tool you have to get there is called CSS. Basically it’s a list of rules that tell the web browser “When you see something on the page that looks like this, change its style to look like that!” Common uses are to set standard borders, margins, colors for standard parts of a web page.

They’re called “Cascading” because the rules they set out cascade down the structure of a web page, from the outermost “Body” all the way down to the innermost paragraph or bit of text. But just like a cascading waterfall, all the really wicked stuff happens at the very bottom. The “bottom” in this case is the last bit of the CSS style rule; the part that selects the innermost element.

Styling a Parent Element

This works great for most things. CSS lets you easily assign standard styles to common elements on the page. The problem shows up when you need to do something a bit unusual, such as apply the style to a Parent element instead of the normal Target element. Normal CSS won’t let you do that because it only applies the declared style changes on the last page element selected.

You’ll notice the above paragraph has a slight blue background tint. That’s because the paragraph has a Class of ‘colortitle’. The CSS Rule that does the coloring is as follows:

h3 ~ p.colortitle {
  background-color: #f0f0ff;
}

But what if we want to put the background color on the headline <h3> just above the paragraph? And what if we only want to do it when the <h3> headline is followed by a paragraph with a specific Class? You’ll notice the headline above has a slight greenish background tint. That’s done with the following CSS Rule. Note that it uses an exclamation mark ‘!’ to indicate which element actually gets the style:

h3! ~ p.colortitle2 {
  background-color: #f0fff0;
}

The Hook

The neat thing is that CSS Parent Selectors are available, now, easily. If you are running WordPress v4.0 or later then you can install the Militant Moderates CSS Parent Selector MMPS plugin. It’s called MMPS for short, and it’s free. Just like WordPress.

The MMPS plugin is available from the WordPress.org Plugins Directory. You can download a current version by visiting

The MMPS plugin page on WordPress.org.

Oh yeah, and I used MMPS to do this:


I agree, it’s pretty hokey. But it shows the power of Parent Selectors. Basically it lets me change the Style of the Parent of a Link that contains “wordpress.org”. There are lots of other examples on the Plugin web site.

Here are the CSS Rules that do the gotcha:

div::after!  a[href*="wordpress.org"]:hover {
  content: 'Go ahead, click the link. You know you wanna!';
}
div! a[href*="wordpress.org"]:hover {
  color: white;
  background-color: black;
}

Visit the DGP4SL Store on SL Marketplace

Comments

Comments are closed.