否定擬似クラスって何なのよ！

何だってこんなにヤヤコシイのでしょうか？
分かっている人から見たら「簡単じゃないか・・」と思うかも知れないが、分からないけどやりたいんだから仕方ないじゃないか。

CSSで:not()を使い外部リンクにアイコンを付けようとしたのだ。

前はclassを付けてアイコンを付けるだったので、もっと簡単に出来ないのか？と考えた訳です。

検索しては色々と試したょ！

クラスを指定してアイコンを付ける

See the Pen 外部リンク/CLASS指定 by TKu (@tkulog) on CodePen.

現在利用しているワードプレスのテーマはSimplicity2で使いたい機能もある。それはブログカードを全体リンクさせること。
だからclass指定することでブログカードにはアイコンが付かないように区別してたのだ。

しかしですね、これすら面倒なのだよ。

リンクを新しいタブで開く設定

See the Pen 外部リンク/TARGET指定 by TKu (@tkulog) on CodePen.

target指定したらアイコンが付くように設定するとSimplicity2のブログカードにまでアイコンが付いちゃうのだ。

これは、かなり見栄えが悪いのだ。

自サイト以外だったらアイコンが付く設定

See the Pen 外部リンク/自サイト指定 by TKu (@tkulog) on CodePen.

これはCSSに自サイトリンクを書くのが（何となく）嫌なので却下。

否定擬似クラスを使ってみる

See the Pen 外部リンク/否定擬似クラス by TKu (@tkulog) on CodePen.

CSSの:not()の使い方とか何とかってムリポー。
ここでまた検索して色々試したのがこれだ。

また後で変更したい環境になるかも知れないが？これくらい書いておいたら何とか対応出来るんでないかい？

まとめ

ハッキリ言って我儘な間違い表記かも知れないが、

クラスを付けることもなく新しいタブで開いても良し。
Simplicity2テーマでブログカードを新しいタブで開いても良し。
リンクターゲットの指定をしてもしなくても良し。

一応希望通りになったんでないかい？