:not擬似クラスでCSS3のサポートをチェックする方法

:not擬似クラスでCSS3のサポートをチェックする方法

Posted at September 17,2014 12:03 AM
Tag:[CSS]

CSS3の:notで擬似クラスのサポートをチェックする方法を紹介します。

:not擬似クラス

1.はじめに

:checked擬似クラスでチェックボックスに連動して要素を表示させる方法」で、CSSの:checked擬似クラスを使ってチェックボックスの操作に連動してテキストエリアの表示を制御する方法を紹介しました。

前述の記事の再掲になりますが、HTMLとCSSの設定は次のとおりです。

<style>
.bar {
    display: none;
}
input:checked + label + div {
    display: block;
}
</style>
<div>
  <input id="foo" type="checkbox" name="foo">
  <label for="foo">foo</label>
  <div class="bar">
    <label for="bar">bar:</label>
    <input id="bar" name="bar" type="text">
  </div>
</div>

がこの設定では、:checked擬似クラス(というかCSS3)をサポートしていないブラウザで、"display:block"が有効にならず、テキストエリアが表示されないという問題が残ります。

2.:notで擬似クラスのサポートをチェックする

1項の問題を解決するには、上記のCSSに:notを次のように設定します。

<style>
.bar:not(old) {
    display: none;
}
div:not(old) input:checked + label + div {
    display: block;
}
</style>

この設定を行うことで、:notをサポートしていないブラウザはここに掲載したセレクタが適用されず、結果としてテキストエリアがデフォルトで表示されます。

逆に:notをサポートしているブラウザは、:notに指定した値「old」に常にマッチしないので、記述したセレクタがデフォルトで適用されることになります。

3.:notについて

:notは「否定擬似クラス」といい、指定した要素以外のすべてに適用する機能があります。

ここでは「old」という存在しない要素を指定しているので、:notをサポートしているブラウザでは常に適用される結果になります(ただしCSS3擬似クラスのサポートはブラウザ依存)。

このエントリーで紹介した:notは本来の使い方ではありませんが、ネットをチェックすると:not自体の紹介はされていても、実践的な使い方に言及されている記事がなかったので、ひとつのテクニックとして覚えておくと便利かもしれません。

4.参考サイト

参考サイトは下記です。ありがとうございました。

Hiding CSS rules with the negation pseudo-class

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)