Black Friday Sale! 40% OFF all books & plugins w/ code: FRIDAY22
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: "";
	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: "";
	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 = Web Developer. Book Author. Secretly Important.
.htaccess made easy: Improve site performance and security.

31 responses to “Awesome New CSS3 Selectors”

  1. Avatar photo

    I was suspicious when it was only webkit an IE but I went with it.. It wasn’t until the reset values that alarms started going off, then when I saw DB queries I remembered the date. I kinda like the idea of css resets and rediercts though rather than pasting large blocks of code and playing with .htaccess respectively

  2. damn .. wish reverse selector ACTUALLY were trve ;)

    of corpse, that was the ACTUAL hint for april fools .. :P

    cu, w0lf.

  3. Avatar photo

    Nice try – i thought that might can be, until the database query :)

  4. Avatar photo
    Web Technology News 2011/04/02 9:53 pm

    It was only until I got to the database part until I realised this was a joke :)

  5. Avatar photo

    I heard CSS can make you rich too now. You just declare the display value in the print media:

    @media print {
    body {
    display: dolla-dollar-bills-yall;
    denomination: ben-franklinz;

    Then just print out the page and cut out the cash dollars with a scissors and buy malt liquor.

  6. Avatar photo

    oh man,
    another April Fools


  7. Avatar photo
    Market Guru 2011/04/04 2:05 am

    Hey Bro. I love the new theme. :D But I wish it was stretchable cause there is a lot of free space on both sides of my screen.

  8. To sum them up in one word “Awesome” they are and awesome it is!

  9. Thomas Salvador 2011/04/10 11:16 am

    lol, nice ideas.

    you had me until the ‘reset: meyer;’ made me think ‘how should this be maintained?’

    (i oversaw the funnier reset: happy; there and saw it in the comments first)

    then, i saw the @database .. ‘wtf, impossible, security!’ .. wait .. when was this posted?

    good work. he he.


  10. Michael Mao 2011/04/10 9:42 pm

    Well… I was about to print it out before I scrolled down to see the comments:(

    I am sad…

  11. The parent selector tricked me and thrilled me a lot… May I say I even tried it? What a n00b :D

  12. Avatar photo
    Panduan WordPress 2011/05/02 4:02 pm

    Awesome.. this is what CSS should be. Thanks for share

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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Upgraded iMac to Ventura. Disabled "unsend mail" feature and found some (now) hidden wallpaper settings. Overall smooth upgrade.
( $this ) is bloat. ($this) is better.
The Legend of Zelda: Tears of the Kingdom coming May 12, 2023. Absolutely pumped.
Favorite thing for breakfast is a tall glass of cold water. Hits the spot every time.
Fall is my favorite season :)
Still a few days left before “Unlimited” pro licenses are no longer available.
Getting back into it after a nice mini vacation. Time to ramp up and get busy.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.