イベントを発生させてセレクタに複雑なCSSを指定させる

たとえば、こんな感じのcssがあったとしましょう(適当)

ul.hoge li{
  background-color: #eeeeee;
  background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#000000), to(#ffffff));
  background: -moz-linear-gradient(bottom, #000000, #ffffff);
  background: -o-linear-gradient(bottom, #000000, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
  color: #fff;
  border-top: 1px solid #dddddd;
}

jQueryでcssメソッドを使ってこのCSSを動的に指定する場合、
clickイベントを仕掛けて$(this).cssだかなんだかやってもどうにもならない。
こんな複雑なcssをjQueryのメソッドを使ってどうやって指定しろというのでしょう。

そのため、まずダミーのセレクタを用意し、イベントでそのセレクタをDOMに
作成するのが最上の策かと。

上記のCSSを以下のように書き変える。
これでselectedセレクタにCSSが設定される。
まだselected要素は存在しない。

ul.hoge li.selected {
  background-color: #eeeeee;
  background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#000000), to(#ffffff));
  background: -moz-linear-gradient(bottom, #000000, #ffffff);
  background: -o-linear-gradient(bottom, #000000, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
  color: #fff;
  border-top: 1px solid #dddddd;
}

だが、

$("ul.hoge li").live("click", function() {
   $(this).addClass("selected");
});

としてclickイベントからselected要素を動的に作成すれば、li要素にCSSが適用されるのだ。