このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.05.10

CSS3 否定擬似クラス E:not(s)

CSS3 否定擬似クラスの使い方です。

特定のセレクタ以外のセレクタに適用されるセレクタと、ちょっとひねくれたセレクタです。

使い方は

E:not(s)

Eは要素、(s)に適応させたくない要素や属性を入れることによって、

それ以外にcssを適応させます。

HTML

<a href="#">herf属性有り</a>
<a>herf属性無し</a>

CSS

a:not([href]){
font-size: 30px;
background: green;
}

とすると、

herf属性がないa要素のみに適応させます。

また、

HTML

<h1>h1の要素ですh1の要素です</h1>
<h2>h2の要素ですh2の要素です</h2>
<p>pの要素ですpの要素です</p>

CSS

body *:not(h1){
background-color:red;
}

とすると、body *はすべての要素になるのですが、

notセレクタでh1を代入しているので、

h1以外の要素全てに適応させることが出来ます。

どこで使うのやら。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。