スタイルシートで条件（否定）を付けるのに苦労した。

スタイルシート（CSS）を弄っていました。

こんなことをしたかったんです。

• 外部リンクのときは、リンクの右隣に Font Awesome の別タブで開くアイコンを付ける
• 外部リンクがAmazonアソシエイトリンクのときは、そのアイコンを付けない

テキストリンクだったら、ちょうど右隣にアイコンが来るんですけど、Amazonアソシエイトの場合は、画像にリンクがされていて、その隣ではなくて、改行されたところにアイコンが来るんです。

超、ダサい。

整理をすると、下記の条件を満たすときにアイコンを表示します。

• aタグである
• 別タブで開く target=”_blank” が入っている
• 但し、アソシエイトのリンクではない（アソシエイトコードをキーとする） ← not

スタイルシートの中で、not を使ってここまでは出来ていました。

今回は、さらにひとつ条件を追加して、下記のようにしたい。

これがなかなか苦労しました。

• aタグである
• 別タブで開く target=”_blank” が入っている
• 但し、アソシエイトのリンクではない（アソシエイトコードをキーとする） ← not
• 画像からリンクされているものは除く ← not

4行目が追加されたものです。

最初は、aタグの後に来る imgタグをトリガーにしようかなと思ったんですが、

not で指定できるのって、同じタグ内だけですよね？

（よく知らんけど）

aタグから、imgタグにまたがる not ってできないですよね？

（よく知らんけど）

なんか、いくらやっても、もう、分からなかったので、最終的には、人の手を毎回入れることにしました。

aタグに noicon っていう class が付いていたら、アイコンを付けないとしました。

画像にリンクを付けるって、ほとんど無いし。

開き直る。

完成イメージはこんな感じ。

See the Pen css not sample by k-kaz-git (@k-kaz) on CodePen.

まぁ、これで出来たんですけど、人の手を入れずに、もっとすっきり出来るんじゃないかなと、

悶々としています。

で、今回一番ハマったのが、FTPクライアントソフトです。

Linux で使っている FileZilla は、編集なんかをしてファイルが更新されると、「更新されたのでアップしますか？」と聞いてきてくれる親切なソフトです。

あぁ、すいません、お願いしますと、「はい」を押せば、サーバー側のファイルが更新されるという便利なもの。

この便利な機能を使いながら、スタイルシートの修正をして、アップ。

ブラウザで確認するも、思ったように反映されず、キャッシュを消してみたりしながら、再挑戦。

それでもダメなので、書き方が悪いのかと、ネットで検索して、またスタイルシートの修正をして、アップ。（でも、うまくいかず）

これを延々と１時間ほど繰り返しておりました。

全然反映されないスタイルにイラつき、ちょっと涙目になっているところで気付きました。

コイツ（FileZilla）、ルートにアップしていやがる。

子テーマの中にあるスタイルシートを弄っていたので、同じくサーバー側でも小テーマの中に入れないと意味がありません。ところが、コイツ（FileZilla）は、関係のないルートに毎回アップしてくれていたので、修正内容が反映されなかったんですね。もう、初歩の初歩の話ですよ。

それなのに、なんで反映されないんだろうと、何度も打ちのめされていた私って・・・。

今考えると、途中で閃いた条件指定で、もしかしたらスッキリした形で出来ていたのかもしれない。

でも、もう忘れた。

また試す気力も無い。

便利な機能ですが、みなさんもお気を付けください。
（たぶん、私が使い方を理解していないせい）