Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security

Awesome New CSS3 Selectors

The W3C CSS Working Group introduced some powerful new CSS3 selectors to the working CSS3 specification. These new selectors aren’t yet supported by all browsers (currently only Webkit and IE), but designers can start using all the goodness a la progressive enhancement. Let’s check out these awesome new CSS3 selectors and see some real-world examples that are simply too good to be true.

Reverse/Parent Selectors

After years of debate and excuses, CSS parent selectors are finally happening. Parent selectors operate like child selectors in reverse. A common usage example involves removing unwanted link borders around images. When styling your links with stuff like borders and background color, its common to make exceptions for linked images. Flowing down the cascade and targeting the image itself has always been easy:

a img { border: none; }

This removes any border from around the linked <img>, but what if we also need to change the style of the parent <a>? Up until now, JavaScript or additional markup was required to do the job. Awesomely, reverse selectors now make it super-easy. Here’s the parent-selector syntax for removing borders from all links that contain images:

a < img { border: none; }

Incredibly useful, another example might be to style heading elements that contain <span> or <code> tags. Something like this:

h1 < code { font: lighter 41em/11 Monaco, monospace, sans-serif; }

Or maybe we want to change the background when an image is included in the target class:

body < .target img.special { background: url(special-background.png) no-repeat 0 0; }

Notice the less-than (<) operator – that tells the browser to target the parent of the matched element. Incredibly powerful stuff.. almost too powerful. But wait, there’s more..

Selective Style Resets

Actually a property rather than a selector, reset enables you to reset styles for specific selectors. The reset property acts like a localized CSS Reset. Instead of trying to reset all properties individually, we can use the new reset property to do it all at once:

.target { reset: browser; }

This resets all properties of the target element to browser defaults. So now even within the most complex designs, it’s possible to reset a specific element (and all of its child elements) back to browser defaults. In addition to browser, which resets to browser defaults, the reset property can clear styles via the following values:

  • reset: border; – reset a specific property
  • reset: safari; – reset to a specific browser
  • reset: meyer; – reset using any known reset method
  • reset: grunge; – reset element with any popular style
  • reset: blink; – make all properties blink, scroll, or spin
  • reset: happy; – style the element to match your mood

As if all that weren’t unbelievably awesome enough, the generous folks at the W3C also threw in the handy !reset declaration, which makes it easy to reset any property to browser defaults before adding your own style:

.target { background: none !reset; }

The !reset works for any property, and is the perfect solution for dialing in the perfect design.

Database Queries

CSS3 can also connect to, and interact with, your database. Here is the syntax for connecting via localhost:

@database {
	username: "your-username";
	password: "your-password";
	database: "your-db-name";
	dbhost: "your-db-host";
	}

Once connected, you can do powerful stuff using CSS3’s advanced field selectors:

@database {
	select: "post_modified";
	from: "wp_posts";
	order: "post_modified desc";
	limit: 1;
	}

What’s even more awesome are the shorthand properties for some of the popular blogging platforms:

@database(wordpress) {
	display: loop;
	order: desc;
	posts: 5;
	}

This makes it easy to eliminate pesky PHP scripting and replace it with CSS.

Send Email

New CSS3 functionality makes it easy to send spam-free email from any web page:

@email {
	recipient: "joker@example.com";
	subject: "Happy April 1st!";
	message: "CSS can do it all!";
	}

Finally, we can say goodbye to JavaScript and other techniques for sending secure, spamless email. I’m looking forward to seeing @email expanded upon in the future. It would be great to tweet right from my stylesheet.

Redirect Pages

If you think CSS can’t do .htaccess, think again. Here we are using CSS3’s new @redirect selector to redirect all requests to the home page:

@redirect {
	request: ".*";
	redirect: "https://perishablepress.com/";
	status: 301;
	}

Note the status property value is specified without quotes. Be careful about that when using this amazing new selector.

More to Come

As mentioned, these new selectors only work in Internet Explorer and Webkit-based browsers like Safari. So don’t go too crazy – only a fool would use these new selectors and properties without really thinking about it first.

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

31 responses to “Awesome New CSS3 Selectors”

  1. I am almost 2 months late to this April fools, so i was confused and bemused.

  2. thank you..

    this is the first place where i found about database controls from css3..

    nice one.. i would like to know more about this..!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Deep dive into WP theme development.
Thoughts
2 things I hate to see in stylesheets: _ and #
Love VLC media player but it fails miserably when it comes to randomizing large collections of mp3 and other files.
Dashlane redesigned, stating proudly they "removed all filigree". Should have kept it; the app now looks generic and boring. Killed your identity.
Working on integration for setaPDF + EDD on the new books subdomain. Good times.
Toggle visibility of hidden files on Mac: Cmd + Shift + .
Great tool for checking browser caching for web pages and all included files.
The new minimalist design styled by 14KB of CSS (uncompressed and un-minified). That covers 850+ posts and pages spanning 15 years of diverse content.