CSS3否定（NOT）セレクタの検討
CSSには、次のような特定の条件で要素を選択できるようにするセレクタがいくつかあります。 ホバー, ：フォーカス, ：アクティブ, それでも今日はこれらのセレクタをカバーしません。まだほとんど知られていないがほとんどのWebデザイナーによって使用されている方法を見ていきます。 ではない セレクタ、または否定セレクタとも呼ばれます.
それは何をするためのものか?
きっと ではない 名前自体はすでにその機能を説明しています。 指定された要素または条件の反対. 例えば：
この構文は以外の要素を選択します p （段落）.
：しない（p） 以下の構文例では、 div する要素 ではない クラスを持っている abc
div：しない（.abc） それでは、このセレクタを実際の例で試してみましょう。
まず最初に、ウィキペディアからのリンクと架空のドメインからのリンクをいくつか使用して、いくつかの段落を作成しましょう。これが段落のHTMLマークアップです。.
CSS：セレクターではないデモ
ナツメアップリケゴマスナップチュッパチャップ チョコケーキ. オート麦ケーキマシュマロwypasタフィードーナツケーキ。チュッパチャップスゼリーカップケーキグミベア。レモンドロップケーキウエハース.
チーズケーキチョコレートケーキドーナツ ゼリーの甘いロールパウダースフレ？？？©チョコレートケーキ。 Wypas綿菓子レモンドロップクッキーキャンディードーナツボンボンマジパン。マカロンキャンディー甘草ゼリー-o。チョコレートパイスウィートロールキャンディー マシュマロ ドラゴン×コットンキャンディーブラウニーマシュマロ.
プリントッピングマシュマロクマの爪。パイマフィンペストリーグミ フルーツケーキブラウニー ゼリージンジャーブレッドゴマスナップ。お菓子プリンカップケーキクマの爪。にんじんケーキマフィン綿菓子トゥーツィロールマフィン。ジェリービーンズタルトdragÃ??? ???©e甘いアイシング ウエハーストッピングチョコレートバー. スウィートロールタフィーシュガープラムペストリーdragÃ??? ???？e ボンボンキャンディーマフィン.
ケーキマジパンアップリケペストリー wypasフルーツケーキ。エンバクケーキチョコレートwypasdragÃ??? ???©eシュガープラムニンジンケーキのアイシング。キャラメルチョコレートバークロワッサンウェーハカップケーキパイナツメチョコレートバー。ビスケットキャンディー杖dragÃ??? ???©e.Candyブラウニーオート麦ケーキゴマスナップチーズケーキパウダートゥーツロールビスケットクマの爪。スフレ???©グミベアリーゼリービーンズゴマスナップfaworki クッキーデザート甘いボンボン.
ここでの計画は次のとおりです。ウィキペディアを指していないリンクのみを選択し、それらのリンクに注意を促すためにそれらのリンクに感嘆符を付けます。.
まず、追加します ：後 マークを配置するためのすべてのリンク上の疑似要素。 インラインブロック 素子.
a：display：inline-blockの後。
次に、ウィキペディアを指していないリンクをすべて選択するために、 ではない 属性セレクタを持つセレクタ。ここの属性セレクタは、href属性が始まるすべてのアンカータグを選択します。 http://en.wikipedia.org/ そしてそれを ではない, それは明らかに反対を選択します。だからここに行きます：
a：not（[href ^ = "http://ja.wikipedia.org/"]）：background-color：＃F8EEBD;の後ボーダー：1ピクセルソリッド＃EEC56D。ボーダー半径：3px 3px 3px 3px。色：＃B0811E。内容： "！";フォントサイズ：10pt。左余白：5px。パディング：1px 6px。位置：相対;
できます！ウィキペディアを指していないアンカータグには感嘆符が付きます.
Chromeのバグ
これをChromeで表示すると、レンダリングされた効果が上記のとおりではないことがわかります。 URLに関係なく、すべてのリンクに感嘆符が付いているように見える.
このケースは実際にはバグとして対処されています。そのため、このバグを修正するには、この規則を追加する必要があります。.
a [href ^ = "http://ja.wikipedia.org/"] / * Chromeハック* / display：inline-block;
そして今問題は解決されるべきだった.
- デモ
結論
状況によっては ではない 上記の例のように、セレクタは本当に最も効果的なオプションです。不要なクラスや追加のマークアップをドキュメントに追加しなくても、ランダムな要素を選択できる場合があります。.
このセレクターを利用することで、さらに効果を高めることができます。これは、1つの例です。CSS3によるフィルター機能
