Travelogue

CSSの属性セレクタやjQueryのcontainsフィルターをうまく使ってコーディングするとスマート

公開日：

CSSの属性セレクタは馴染みが薄い人が多いかもしれませんが、特定の属性をもつタグだけを指定できるので便利。
これらを使えばclassをいちいち割り振る必要もなくスマートです。

例えばinputタグのtype属性の値がsubmitの要素だけを指定するなら以下のように書きます。

input[type="submit"] {
width:200px;
}

colspan属性を持つtdタグだけ指定するなら以下のように書きます。

td[colspan] {
background:#ddd;
}

しかしタグに属性が何も無い場合はこれらを使うことができません。

jQueryのcontainsフィルターも便利

たまにあるのですが、WordPressのプラグインが出力するHTMLコードが以下のようなまっさらのHTMLタグしか出力しない場合、デザインによってはCSSの適用方法に困ってしまうことがあります。

<ul>
<li>ぶどう</li>
<li>りんご</li>
<li>みかん</li>
</ul>

上のHTMLで例えば「りんご」だけを赤い文字にしたい場合はどうしましょう？
nth-childのような順番を指定できるセレクタを使えば解決できそうな気もしますが、項目の数や順序が一定でない場合はそうもいきません。
つまり以下のように数が増減したり、順番が入れ替わるケースが起きる場合です。

<ul>
<li>みかん</li>
<li>グレープフルーツ</li>
<li>りんご</li>
<li>バナナ</li>
</ul>

プラグインが出力するHTMLコードにclassが付与されるように何らかのカスタマイズをする人もいるかもしれませんが、超簡単なjQueryで解決するのもひとつの方法。

jQueryのcontainsフィルターを使えば、要素内の内容を指定することが可能です。
以下のように書くと「りんご」という文字が含まれる場合だけ、liタグのcolorプロパティを赤色にしてくれます。
※jQuery本体は別途読み込みます。

$(function(){
$("li:contains('りんご')").css("color","#f00");
});

個人的にはこれって意外と使いどころが多いんじゃないかと思っています。

Pagetop