jQueryで弄れない要素たち的なお話(:after、:beforeなど)

最近ではIE8もほとんど無くなって来ているし、
そもそも自分が作ったとかコーディングしたサイトではIEのアクセスが少なかったりもするし、
ってことでHTML5的なものをよく使っている。

その際に便利なのがbackground-imageの重ねがけがあったりするけど、
重ねがけした画像の一番上のレイヤーのものだけ弄るとかって面倒だったりするので、
そういったときに:after要素作ってそこに画像を入れるとかって荒技を使ったりする。

ただまぁjQueryでは弄れない要素がいくつかあるので今回はそのお話をば。

■:afterや:beforeなどの疑似要素は弄れない
これはまんま書いた通りだけど、弄れない。
DOM的に生成されていないとか多分そういうことなんだと思う。
アニメーションやらを仕込みたいといった場合には下記のようにclassを割り当てるのがよいかと。

.div:after{
  background-color:#000;
  transition:1s ease-in-out;
}

.div.anim:after{
  background-color:#f00;
}

jsで.divに対してクリックしたらとかで.animというクラスをつけて上げればアニメーション的なのが出来る。

なので他の:first-lineとか:link要素なども同じような感じでやってあげればOK。

■input要素やimg要素などで:beforeや:afterは使用できない
実は以外と知ってなかったりするけど、input要素やimg要素などでは:beforeや:afterは使用できない。
これには理由があり、終了タグがないからだったりする。
終了タグって？ってことだけど、要は&jt;/div>みたいなもののこと。
beforeやafterはその要素内の一番最初とか一番最後に疑似的にコンテンツを導入するといった感じなので、
そういった場合は使えないから諦めて他の方法を試してみるのがいいんじゃないかと。

ということで普段はあまり気にしないで使っているけど、
実はjQueryで弄れないものってあったりするので気をつけよう的な。
特にIEの比率がここ最近落ちてきたりするので疑似要素が色々と使えるようになってきてるけど、
そういった際に色んなTipsを使うにしてもこういった基本ルールを抑えておかないとまずいよ的な。