またに使うCSS の :not() の使い方をまとめました。
基本的な使い方
基本的な使い方はこのタグ以外適用したい場合に使います。カッコの中に除外したいタグを指定するだけで使用できます。CSS3が使えるようになり使う機会が増えてきました。
指定タグを除外
/* Pタグ以外適用 */ :not(p) { color:#FFF; } /* divタグ以外適用 */ :not(div) { color:#FFF; } /* h1タグ以外適用 */ :not(h1) { color:#FFF; }
指定IDのみ除外
/* #id以外適用 */ :not(#id) { color:#FFF; }
指定クラスのみ除外
/* Pタグの.class以外適用 */ p:not(.class) { color:#FFF; }
指定擬似クラスのみ除外
/* 擬似クラスhover以外適用 */ a:not(:hover) { color:#FFF; } /* 擬似クラスfirst-child以外適用 */ div:not(:first-child) { color:#FFF; }
指定の属性セレクタのみ除外
/* href 属性以外適用 */ a:not([href]) { color:#FFF; } /* href 属性以外適用 */ a:not([href]) { color:#FFF; } /* href 属性example.comを含んでいるもの以外適用 */ a:not([href*="example.com"]{ color:#FFF; } /* type 属性textを含んでいるもの以外適用 */ :not([type="text"]) { color:#FFF; }
指定の子要素のみ除外
.contensクラスのh2のみ除外
<div class="contents"> <h2>ここが除外</h2> <p>ここは適用</p> <p>ここは適用</p> </div>
.contents :not(h2) { color:#FFF; }
実際に使った例
チェックボックス以外
<form class="form"> <dl> <dt>テキスト</dt> <dd> <div> <input id="b" name="b" value="" type="text"> </div> </dd> </dl> <dl> <dt>チェック</dt> <dd> <div> <label> <input id="c" name="c" value="1" type="checkbox">こちらをチェック <span></span> </label> </div> </dd> </dl> </form>
.form dd input:not([type="checkbox"]){ background: #fff; padding: 0 0 0 10px; width: 100%; }