CSS

css :notとは?否定疑似クラス「:not」の使い方!

否定擬似クラスnotとは?

否定擬似クラスnotを使用してcssを適用しない

否定擬似クラスnotは、cssを適用させたくないhtml要素にcssを適用させない指定をする事ができます。カッコ()で指定したhtml要素をcss適用対象から外す事ができます。

class指定で沢山のHTML要素にまとめてcssを適用している場合、一部のHTML要素だけcss適用させたくない状況に直面すると思います。その時に擬似クラスnotを使えば簡単にcss適用対象から外す事ができます。

CSSの:not()の使い方

擬似クラスnotの指定

擬似クラスnotの記述の仕方、使い方について説明していきます。

”cl2”というクラス名でHTML要素をまとめてcss指定していて、h1のみcssの適用対象から外したい状況を想定します。このような場合に、擬似クラス:notを使ってクラス名の後に:not(h1)を指定すればcss適用対象から外す事ができます。

擬似クラスnotの記述の仕方

    1. [.クラス名]class指定がされています。
    2. [:not]コロン一つ:+notで否定擬似クラスを指定します。1のクラス名の後に:notを付け加えます
    3. [(html要素)]cssを適用させたくない(html要素)を付け加えます。
    4. [ {cssの記述 } ] もともとクラス名に対して指定されていたcssが記述されています。
    5. 指定したhtml要素には4.のcssが適用されなくなります。
!importantとは?〜CSSが効かないときの対処法〜

続きを見る

「指定した要素以外」を指定する時に使う擬似クラス

notは指定した要素以外にcssを適用する

指定したhtml要素以外にcssを適用したい場合に擬似クラス:notを使用します。例としてHTML要素<h1>,<h2>,<p>にclass2という名前でクラス指定されcssが適用されている状況を想定してみます。

  • 外観1の説明
    1. HTML要素<h1>、<h2>、<p>がclass2という名前でクラス指定(グルーピング)されています。
    2. グルーピングされたclass2に対して赤い実線枠線を装飾するborder:solid redがcss指定されています。
    3. 各要素は赤い実線枠線が装飾されます。
 html1
<body>
<h1 class="class2"> おはよう </h1>
<h2 class="class2"> はじめに </h2>
<p class="class2"> てりたま </p>
 css1
.class2{
border: solid red;
}
  • 外観2の説明
    1. 外観1で作成したcssコードのクラス名の後に否定擬似クラス:not(h1)を挿入します。
    2. 指定したh1要素以外のHTML要素<h2>,<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を使う際の注意点

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(要素1 要素2)は適用できない

:not(要素1 要素2)

  :not(要素1 要素2)は適用できない

カッコ()内に複数の要素を記述して指定すれば、複数同時に擬似クラス:notを適用できると考えがちです。

擬似クラス:notで:not(要素1 要素2)のように記述した場合は:notが適用されません。

 

:not(要素1,要素2)は適用できない

:not(要素1,要素2)は適用できない

:not(要素, 要素2)は適用できない

カッコ()内に複数の要素を記述して、要素の間にコンマ(,)を入れて区切って(要素1,要素2)と記述して指定しまいがちです。

擬似クラス:notで:not(要素1, 要素2)とコンマ(,)で挟んでも:notは適用されません。

 

まとめ

擬似クラスnot:でcssを適用させたくないhtml要素を指定する事で、cssの適用対象から外れます。html要素を複数指定する場合、:not(要素1):not(要素2)といったように二回記述する事で適用する事ができます。

CSS borderの使い方を理解してデザインの幅を広げよう!

続きを見る

CSS hoverとは?hoverの使い方を学んで上手く使いこなそう!

続きを見る

-CSS
-

© 2021 OWLVIEW Powered by AFFINGER5