Celebrating 20 years online :)
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.

About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
SAC Pro: Unlimited chats.

31 responses to “Awesome New CSS3 Selectors”

  1. Andy Walpole 2011/04/01 9:22 am

    You had me up until CSS database queries ;)

  2. Haha.. now that’s something new for April ;)

  3. Hans Christian Reinl 2011/04/01 10:16 am

    Nice try. But we’re no April Fools :))

    • Latin America doesn’t celebrate 1st April’s Fool.
      We had “Día de los inocentes” on December 28th.

      • There is no! Brazil is Latin America and celebrates April Fools’ Day.

  4. Chris Krycho 2011/04/01 9:17 am

    You had me thoroughly (if a bit surprised) up until you mentioned the reset: happy variant, at which point my skepticism level started going. And then you put a username and password in a CSS file, at which point all my alarms went off: “But that’s nearly always a publicly accessible file; that would leave your database completely open to hacking!” By the time I’d skimmed my way on down to the notion of platform-specific implementation, my brain finally caught up.

    Well done, and funny!

  5. Kyle Hotchkiss 2011/04/01 9:19 am

    I was so excited for the first one. Then I saw the date.

  6. Today all internet is suspicious…

  7. kurtextrem 2011/04/01 9:51 am

    reverse selector, style resets and redirects would be really great, if they’re real :D

  8. The reverse parent selector almost sounded plausible. Maybe as a pseudioclass. They already have :nth-child. Why not :mother, :father, or :uncle? Or a random subclass. I could use that. Happy April 1st!

    • Chris Krycho 2011/04/02 6:20 am

      As it turns out, implementing a parent selector is really hard because of the way browsers parse and build the DOM—it ends up being a massively expensive task, because there are so many possible combinations that result from reevaluating parents… it turns into a nightmare of recursion.

  9. I hate you! :)

  10. I suspected a bit from the start, and eventually I read the DB thing… Then I lol’d. :D

  11. Gimme just a couple days – I’m almost done with a jQuery plugin to enable reset: blink on current browsers. I expect it to conquer the world in a blink.

  12. I was all excited about the reverse selectors, what a disappointment :D

Comments are closed for this post. Something to add? Let me know.
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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.