小粋空間  -  a cheap joke and a play on words site

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

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

１．はじめに

「: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"が有効にならず、テキストエリアが表示されないという問題が残ります。

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

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

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

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

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

３．:notについて

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

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

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

４．参考サイト

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

Hiding CSS rules with the negation pseudo-class