Use CSS3 Selection Pseudo-Classes to Declare Your Team Spirit

I’m hesitant to admit it, but I’m not a huge football fan. My boyfriend, however, loves “his” team — the USC Trojans. And if there’s one thing I’ve learned over the years, it’s that football fans will use any excuse to dress up or decorate with their team colors. Actually, real fans don’t even need a reason to show team spirit.

So, in honor of football fans everywhere and to kick off the fall football season in America, I thought it would be fun to show how to use one of the new tools in CSS3 to decorate a web page with your team colors. Let’s play with the selection declaration. 

There are many neat design tricks in CSS3. The selection declaration — ::selection — is a quick way to add some polish onto a design and give a website the “wow” factor that really makes clients happy. Using a .selection class can override the operating system’s default highlight color with any color you specify.

As with so many of the best html and css goodies, browser support varies. Safari and Firefox both recognize the selection declaration, but you’ll need to implement the code a bit differently for each browser. Here’s how to use CSS3′s new selection declaration to add a dash of unexpected color to your web design.

The sample code below uses CSS3 to reverse the color of selected paragraphs by designating the highlight color as black with white text.

::selection { background: #000; color: #fff; /* Safari */ }
::-moz-selection { background: #000; color: #fff; /* Firefox */ }


Now for something a little more fun! Using the selection pseudo-element, you can use any colors you want to spice up the font color and background. Set up new css classes for different purposes, such as showing how much you love your team.

Highlight the paragraphs below to see the effect.

Awesome CSS3 Highlighting effect for USC Trojan Fans

Highlight any text in this paragraph! Nam dignissim velit ut elit congue a bibendum lectus bibendum. In eget lectus non nibh lobortis luctus eu nec nisi. Praesent dolor arcu, ornare eget porttitor et, facilisis vitae neque. Aenean ligula nunc, posuere id laoreet quis, imperdiet lobortis lacus. Duis quis urna nibh, ut sagittis purus.


.trojan::selection { background: #990000; color: #FFCC00; /* Safari */ }
.trojan::-moz-selection { background: #990000; color: #FFCC00; /* Firefox */ }

CSS3 text selection effect for UCLA Bruin Fans

Highlight any text in this paragraph! Phasellus non orci augue. Aliquam sed tellus sem, at ullamcorper purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

All I did was use different selection color for paragraphs with different classes:
.bruins::selection { background: #536895; color: #FFB300; /* Safari */ }
.bruins::-moz-selection { background: #536895; color: #FFB300; /* Firefox */ }

Related tutorials:

How to Create a Hover Effect Using CSS The Design of your Site: CSS Backgrounds Web Tip: Creating a Reusable “Button” Class Photoshop Background Eraser Photoshop Tutorial