一部だけ除外したい CSS の :not() の使用方法

またに使う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%;
}