ある CSS を適用するとき、一部だけ除外したいときは「:not()」を直列につないでいけばいいようだ

最終更新日:2015-11-23

最近、便利な CSS の使い方を発見しました。それは「:not を直列につないでいって、一部 CSS を適用しないようにする」という方法です。

例えば、ウィジェットのタイトルに以下のような CSS を追加して、

#supplementary aside h3 {
border-top: 1px solid #1e8cbe;
border-bottom: 3px solid #1e8cbe;
margin: 15px 0 10px;
padding: 8px 5px 7px;
background-color: #fff;
text-align: center;
border-radius: 2px;
position: relative;
}

上下に青いラインを入れていて、一部のウィジェットには適用したくない場合、

image

「:not」を以下のような感じで追加すると、

#supplementary aside:not(#top-posts-2):not(#text-68):not(#text-129):not(#twitter_timeline-3):not(#facebook-likebox-2):not(#jetpack_my_community-2):not(#archives-5) h3:not([class^="cat-item"]) {
border-top: 1px solid #1e8cbe;
border-bottom: 3px solid #1e8cbe;
margin: 15px 0 10px;
padding: 8px 5px 7px;
background-color: #fff;
text-align: center;
border-radius: 2px;
position: relative;
}

一部のウィジェットのタイトルに対しては CSS を適用させないようにすることができました。

adfasdfasd

なお、:not は IE8 以前のバージョンでは使うことができませんが、:not を使っている CSS 全体が効かなくなるので、旧バージョンに悪影響を与えることはなく、装飾などに気軽に使えるのではないかと思います。

IETester-4
IE 8 での表示。ウィジェットのすべてのタイトルで CSS が適用されなくなりました。

参考

One comment

  1. 同じところで悩んでいたので参考になります!

    いいね: 1人

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。