セレクターその１２（empty擬似クラス[CSS3]）

jQuery セレクター

子要素やテキストを含まない要素を指定できる。
セレクターの後ろに :empty と記述する。

あ〜、これはテーブルでやってみたいなぁ。自前タグをテーブルでやってみよう。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        $("li:not(:first-child)").css("color","red");
        $("td:empty").css("background-color","blue");
      })
    </script>
  </head>
  <body>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li></li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li></li>
    </ul>
    <table border="1">
      <tr>
	<td>あ</td>
	<td>い</td>
	<td>う</td>
      </tr>
      <tr>
	<td>え</td>
	<td></td>
	<td>か</td>
      </tr>
      <tr>
	<td>き</td>
	<td>く</td>
	<td>け</td>
      </tr>
    </table>
  </body>
</html>

おお！抜けたとこの背景色がちゃんと青になった！
これは使う場面があるかも。