例えば、.hogeと.pekoの二つのクラスを持たない要素に指定したい場合は、カンマを用いて記述します。
|
1 |
:not(.hoge, .peko) { etc.} |
記述的に問題はありませんが、実際は今のほとんどのブラウザで実装されていません。
|
1 |
:not(.hoge):not(.peko) { etc.} |
今のブラウザに認識させる方法として上記のように「:not()」を続けて書く方法があります。ただし、気をつけないといけない点があります。
下記の状態のhtmlソースの内容に、上記の「:not()」を続けて書く方法を適用してみます。
|
1 2 3 4 5 6 7 |
<ul class="unlist"> <li class="listA">トップ</li> <li class="listA hoge">会社概要</li> <li class="listA">沿革</li> <li class="listA peko">商品紹介</li> <li class="listA">お問い合わせ</li> </ul> |
|
1 |
:not(.hoge):not(.peko) { color: red;} |
上記のセレクタでは、.hogeと.pekoのセレクタを持たない要素が赤になれ！と指定したことで1と3と5行の要素が選ばれたことになりますが、実際にブラウザで確認してみると全て赤になってしまいます。これは.hogeと.pekoのセレクタを持たない要素として.listAが選ばれたので該当する全ての行（.listAで指定された行）に赤が指定されたことになるからです。これを回避する方法として下記の記述をします。
|
1 |
.unlist :not(.hoge):not(.peko) { color: red;} |
cssの詳細度を上げて指定すると回避できます。