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

何だってこんなにヤヤコシイのでしょうか?
分かっている人から見たら「簡単じゃないか・・」と思うかも知れないが、分からないけどやりたいんだから仕方ないじゃないか。
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テーマでブログカードを新しいタブで開いても良し。
リンクターゲットの指定をしてもしなくても良し。
一応希望通りになったんでないかい?
この記事へのコメントはありません。