In our day to day development lives we often get into a rut when it comes to solving certain problems and forget that other options might exist. Below is a list of some “anti-rut” CSS selectors.

1. clip: If you’ve ever written an application where a user may upload a photo, you know the struggle that can ensue where a particular uploaded image breaks the layout (too long, too wide, etc). The clip CSS selector can help you make that square image you were looking for out of the rectangular upload that your user gave you.Usage: clip: rect(5px, 40px, 45px, 5px)

   
// css code
#container {
height:258px;
width:258px;
position:relative;
border:1px solid green
}
#box {
width: 258px;
height: 258px;
}
.clip {
position:absolute;
clip:rect(20px 200px 200px 20px);
}


   
// markup


   more info: http://www.w3schools.com/css/pr_pos_clip.asp

2. font-stretch Text formatting has always been venue where design and accessibility have had their face off. CSS has made huge strides in bridging this gap and font-stretch is just another tool. This tag will condense or expand your chosen font.
// css code
.expand {
font: 13px/18px verdana, arial, sans-serif;
color: #000;
font-stretch: extra-expanded;
}


   more info: http://www.w3schools.com/css/pr_font_font-stretch.asp

3. text-shadow – Another tag that will greatly help with typography is the text-shadow selector. Using this one tag a developer can easily add a nice drop shadow behind a text element. Unfortunately at this point in time this selector only works in Safari but other browsers are set to support it in future versions.usage: text-shadow: color, x-coordinate, y-coordinate, blur radius

   
// css
.shadow {
text-shadow: #000000 10px -5px 1px;
}


   more info: http://www.designmeme.com/articles/dropshadows/

4. :focus – AJAX allows the developer a whole host of possibilities when it comes to styling forms – but most modern browsers (IE 6 aside) support doing a good bit of form tweaking without using any AJAX. The focus pseudo class allows different styling to be used on active form elements.
// css
input:focus, textarea:focus{
border: 1px solid #333;
background: #FFC;
}


   more info: http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

5. :first-child & :last-child – The more CSS is used in markup, the more lists get added into your markup. These handy little pseudo classes allow you to put a different styling on first (or last) items in a list. This can be particularly handy when you are using borders between li’s and don’t want that border to appear after the last li.
   usage: li:first-child
// css
div#mainNav ul > li:last-child{
border: 0;
}


   more info: http://www.w3schools.com/css/css_pseudo_classes.asp

6. att[href^="http:"] – since target=”_new” doesn’t properly validate (and strictly speaking popup windows are not so great) it is often helpful to show your user that they are going to a link that will remove them from your site. This selector will allow you to style those external links differently from your internal links without creating a new class.
a[href^="http:"]{
background: url("images/externalLink.gif") no-repeat right top;
padding-right: 10px;
}


   more info: http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/

Those are the big ones that come to mind off hand – if you think of some that I have left out, please feel free to leave them in the comments.