目次
否定擬似クラスnotとは？
否定擬似クラスnotは、cssを適用させたくないhtml要素にcssを適用させない指定をする事ができます。カッコ（）で指定したhtml要素をcss適用対象から外す事ができます。
class指定で沢山のHTML要素にまとめてcssを適用している場合、一部のHTML要素だけcss適用させたくない状況に直面すると思います。その時に擬似クラスnotを使えば簡単にcss適用対象から外す事ができます。
CSSの:not()の使い方
擬似クラスnotの記述の仕方、使い方について説明していきます。
”cl2”というクラス名でHTML要素をまとめてcss指定していて、h1のみcssの適用対象から外したい状況を想定します。このような場合に、擬似クラス:notを使ってクラス名の後に:not(h1)を指定すればcss適用対象から外す事ができます。
擬似クラスnotの記述の仕方
-
- [.クラス名]class指定がされています。
- [:not]コロン一つ:＋notで否定擬似クラスを指定します。1のクラス名の後に:notを付け加えます。
- [(html要素)]cssを適用させたくない（html要素）を付け加えます。
- [ {cssの記述 } ] もともとクラス名に対して指定されていたcssが記述されています。
- 指定したhtml要素には4.のcssが適用されなくなります。
-
-
!importantとは？〜CSSが効かないときの対処法〜
続きを見る
「指定した要素以外」を指定する時に使う擬似クラス
指定したhtml要素以外にcssを適用したい場合に擬似クラス:notを使用します。例としてHTML要素<h1>,<h2>,<p>にclass2という名前でクラス指定されcssが適用されている状況を想定してみます。
- 外観１の説明
- HTML要素<h1>、<h2>、<p>がclass2という名前でクラス指定(グルーピング)されています。
- グルーピングされたclass2に対して赤い実線枠線を装飾するborder:solid redがcss指定されています。
- 各要素は赤い実線枠線が装飾されます。
html1
<body>
<h1 class="class2"> おはよう </h1>
<h2 class="class2"> はじめに </h2>
<p class="class2"> てりたま </p>
css1
.class2{
border: solid red;
}
- 外観2の説明
- 外観1で作成したcssコードのクラス名の後に否定擬似クラス:not(h1)を挿入します。
- 指定したh１要素以外のHTML要素<h２>,<p>にcssが適用され赤い実線枠線が表示されました。
html2
<body>
<h1 class="class2"> おはよう </h1>
<h2 class="class2"> はじめに </h2>
<p class="class2"> てりたま </p>
css2 .class2:not(h1){ border: solid red; }
CSSの:not()の注意点
notでcssの適用から外したい要素が二つある場合、:notを二回記述しhtml要素を一つ一つ指定する必要があります。
要素二つに:notを適用
.class2:not(h1):not(p){color:blue;}
.クラス名:not(html要素1):not(html要素2){cssの記述;}
class2で指定されている要素中で、h1要素、p要素にcssを適用させないように指定をしています。このように複数のhtml要素を指定する場合は、それぞれ別々に:not()で指定する必要があります。
：not(要素１ 要素2)は適用できない
:not(要素１ 要素2)は適用できない
カッコ()内に複数の要素を記述して指定すれば、複数同時に擬似クラス:notを適用できると考えがちです。
擬似クラス:notで:not(要素１ 要素2)のように記述した場合は：notが適用されません。
：not(要素1,要素2)は適用できない
:not(要素, 要素2)は適用できない
カッコ()内に複数の要素を記述して、要素の間にコンマ(,)を入れて区切って（要素1,要素2）と記述して指定しまいがちです。
擬似クラス:notで:not(要素１, 要素2)とコンマ(,)で挟んでも:notは適用されません。
まとめ
擬似クラスnot:でcssを適用させたくないhtml要素を指定する事で、cssの適用対象から外れます。html要素を複数指定する場合、:not(要素１):not(要素2)といったように二回記述する事で適用する事ができます。
-
-
CSS borderの使い方を理解してデザインの幅を広げよう！
続きを見る
-
-
CSS hoverとは？hoverの使い方を学んで上手く使いこなそう!
続きを見る