Edit in JSFiddle

$(function(){
    
/* :animated */
$("#run").click(function(){
    //:animatedでアニメーションしてる要素にだけclass="colored"を加える
  $("div:animated").toggleClass("colored");
});
function animateIt() {
    //アニメーションする要素
$("#animate").slideToggle("slow", animateIt);
}
animateIt();

/* :eq() */
//ul liの3番目だけ色を赤くする
$("ul#ep li:eq(2)").css("color", "red");


/* :even */
//ul liの偶数行だけ赤くする
$("ul#even li:even").css("color", "red");
    
/* :odd */
//ul liの奇数行だけ赤くする
$("ul#odd li:odd").css("color", "red");
    


/* :first */
//ul liの最初だけ赤くする
$("ul#first li:first").css("color", "red");
    
/* :last */
//ul liの最後だけ赤くする
$("ul#last li:last").css("color", "red");

    
   
    
    
/* :gt() */
//ul liの3番目より後の色を全て赤くする
$("ul#gt  li:gt(2)").css("color", "red");
    
/* :lt() */
//ul liの3番目より前の色を全て赤くする
$("ul#lt  li:lt(2)").css("color", "red");
    
    
    

/* :header */
//ul内の見出し(h1～h6)を全て赤くする
$("ul#header  :header").css("color", "red");



/* :not() */
//ul liのうちの、class="red"に一致する要素以外を赤くする
$("ul#not li:not(.red)").css("color", "red");


    
    
/* :focus */
//focus のinput要素で現在フォーカスされている要素を選択
$("form#focus *:input").bind( 'focus blur', function(){
     var item = $(this);
     setTimeout(function(){
         item.toggleClass("focused", item .is(":focus"));
       },0);
   });

    

//end    
});

<h2>:animated</h2>
<button id="run">アニメーションしてるのだけ緑に</button>
<div></div>
<div id="animate"></div>
<div></div>
<h2 class="clear">:eq()</h2>

<ul id="ep">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ul>

<h2 class="clear">:even</h2>

<ul id="even">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
    <li>list6</li>
</ul>
<h2 class="clear">:odd</h2>

<ul id="odd">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
    <li>list6</li>
</ul>


<h2 class="clear">:first</h2>

<ul id="first">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ul>

<h2 class="clear">:last</h2>

<ul id="last">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ul>





<h2 class="clear">:gt()</h2>

<ul id="gt">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>
<h2 class="clear">:lt()</h2>

<ul id="lt">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>



<h2 class="clear">:header</h2>

<ul id="header">
    <li>list0</li>
    <li>list1</li>
    <li><h3>list2</h3></li>
    <li><h4>list3</h4></li>
    <li><h4>list4</h4></li>
    <li>list5</li>
</ul>





<h2 class="clear">:not()</h2>

<ul id="not">
    <li>list0</li>
    <li>list1</li>
    <li class="red">list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>

<h2 class="clear">:focus</h2>
<form id="focus">
        <input type="text" />
</form>

.clear{clear:both;}
h2{padding:15px 0 5px 10px;
   font-size:20px;
    color:blue;
    border-top:1px solid #eee;
}

ul{margin:15px;}
li{padding:2px 0;}

/*:animated*/
div { 
    background:#eee; 
    border:1px solid #AAA; 
    width:80px; 
    height:80px; 
    margin: 5px; 
    float:left; 
}
  div.colored { 
    background:green; 
}

/*:focus*/
#focus input {
    margin: 5px;
}
.focused {
    background-color: #eee ;
}

/*:header*/
#header h3,
#header h4{/*jQueryが優先されるけど!importantならcssを優先*/
    color:blue;
}