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.

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.