Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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 = Designer. Developer. Producer. Writer. Editor. Etc.
Digging Into WordPress: Take your WordPress skills to the next level.

31 responses to “Awesome New CSS3 Selectors”

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

    You had me up until CSS database queries ;)

  2. Avatar photo

    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 :))

    • Avatar photo

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

      • Avatar photo

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

  4. Avatar photo
    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. Avatar photo
    Kyle Hotchkiss 2011/04/01 9:19 am

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

  6. Avatar photo

    Today all internet is suspicious…

  7. Avatar photo
    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!

    • Avatar photo
      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. Avatar photo

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

  11. Avatar photo

    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. Avatar photo

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

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: Build and sell awesome WordPress themes.
Thoughts
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.
Enjoy my 7-year hand-curated collection of free online tools for web dev and design.
Weapons required to rule the world: the weather, common cold, plenty of idiots.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.