CSSの属性セレクタを使って、if文的な振り分けができます。サンプルは、href属性とtitle属性の内容に応じたテキストを追加することで、各a要素を視覚的に振り分け、分類しています。

セレクタに、a[title="css"]と記述すると、a要素のtitle属性が「css」の文字列である場合、cssを適用します。この例では、「:before疑似要素」を利用して、「 [css] 」をa要素の前に追加しています。

セレクタに、a[title="jQuery"]と記述すると、a要素のtitle属性が「jQuery」の文字列である場合、cssを適用します。この例では、「:before疑似要素」を利用して、「 [jQuery]  」をa要素の前に追加しています。

セレクタに、a[href*="test"]と記述することで、a要素のhref属性に「test」の文字列を含んでいる場合、cssを適用します。この例では、「:after疑似要素」を利用して、「 ★test★ 」をa要素の後ろに追加しています。

サンプルの 1、3、4 では、href属性に「test」を含み、かつ、title属性が「css」であることが分かります。

サンプル

1. リストマークを背景画像（アニメーションgif）で代替え
2. jQuery inputHintBox.jsを使って、フォームにツールチップでヒント
3. CSSとcsshover3.htcで、入力フォームのフォーカス（IEにも対応）
4. CSSのみで、入力フォームのフォーカス（IE非対応）
5. jQuery click、dblclickで、テキストフィールドの入力文字列と置き換え
6. jQuery scrollTop()、scrollLeft()を使って、スクロールの位置を取得
7. CSSを使った角丸ボタン。コメントの囲みにも利用可能
8. jQuery DOM操作：prepend()とprependTo()の違い

サンプルのhtmlのソース

<ol>
    <li><a title="css" href="csstest012.html">リストマークを背景画像（アニメーションgif）で代替え </a></li>
    <li><a title="jQuery" href="js-inputhintbox.html">jQuery inputHintBox.jsを使って、フォームにツールチップでヒント</a></li>
    <li><a title="css" href="csstest021.html">CSSとcsshover3.htcで、入力フォームのフォーカス（IEにも対応）</a></li>
    <li><a title="css" href="csstest020.html">CSSのみで、入力フォームのフォーカス（IE非対応）</a></li>
    <li><a title="jQuery" href="js-textreplace-test15.html">jQuery click、dblclickで、テキストフィールドの入力文字列と置き換え</a></li>
    <li><a title="jQuery" href="js-scroll.html">jQuery scrollTop()、scrollLeft()を使って、スクロールの位置を取得</a></li>
    <li><a title="css" href="kadomaru2.html">CSSを使った角丸ボタン。コメントの囲みにも利用可能</a></li>
    <li><a title="jQuery" href="js-prepend-prependto.html">jQuery DOM操作：prepend()とprependTo()の違い</a></li>
</ol>

サンプルのCSSのソース

a[title="css"]:before {
	content: "[css] ";
	color: blue;
	font-weight :bold;
	}
a[title="jQuery"]:before {
	content: "[jQuery] ";
	color: red;
	font-weight: bold;
	}
a[href*="test"]:after {
	content: "　★test★";
	color: #29a61c;
	font-weight: bold;
	}

このページの解説は、「CSSの小技・まとめ（12）」にもあります。