【CSS3】特定のclass等を除外する擬似クラス『:not()』

2017/06/06 技術系 投稿者:竹内

HTML側にclassを追加したりCSSを直書きすることは出来ない環境においてCSSの擬似クラスを利用してコーディングする際、『特定のclassを除外する』CSSを用いてスマートなコーディングが出来ます。
特にWordPress環境では、bodyタグにclassがたくさん記述されるので、その記述のなかのclassを拾い出して除外する手法でコーディングを行ってみました。

CSS3の擬似クラス『:not()』

bodyタグに記述される『.home』に対して、トップページ「以外」に適用したいCSS(トップページだけは除外するCSS)を記述します。
都合良くサブページにはサブページ用のクラスが記述されていれば良いのですが、CMS等によりページが新規追加された際に任意のページ名がclassとして記述される事が多々あります。
HTMLを変更することが出来ない、どんなclass名になるかわからない今後追加されるであろうページに対してCSSを予め設定しておくことを目的とします。

HTMLとCSS

HTML(わかりやすいようにbodyタグではなくdivタグを使います)

CSS

まとめ

「全ページ共通のCSSで文字色を赤にしておいて、トップページのみ黒にすれば良いじゃないか。」と言われればそうなのですが、スマホ対応にしろその他のコーディングにしろ、今回のケースのような単純なものばかりではありません。
レスポンシブなスマホ対応でCSSを上書きしたり、複雑なコーディングがなされている海外テンプレートなどでは、汎用的なCSSに引っ張られてうまくコーディング出来ず「!important」を使用して力技で済ませてしまう事もあります。
除外するCSSを利用することによって、もっと柔軟なコーディングが出来るのではないでしょうか。
例えばWordPressですと、絵文字には「.emoji」とクラス指定されたりしています。絵文字ではないimgタグに対してCSSを適用する場合には重宝すると思います。

幸いなことに、最近の主要ブラウザーでは問題なく使用出来ますので「そう言えば除外出来るんだっけな」と頭の片隅にでも置いておくことで、今後何かの役に立つかもしれません。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)