読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

疑似要素をどうやって取得したらいいんだろう

jQuery
.hoge ul:before {
  border-left-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 5px;
 .....
}

っていうCSSがあって、疑似要素(beforeやafter)を使っているとき、
このbeforeやafterの要素はどうやって取得したらいいんだろう。

これか?

$('.hoge ul:before')...

これか?

$('.hoge ul::before')...

はたまたこれか?

$('.hoge ul[before]')...

なんかどれでもなかった。
僕の拙い語学力では、公式を読んでも方法が分からなかった。
Selectors | jQuery API Documentation

というわけで、イベントで疑似要素の中身を弄りたいときは、
CSSを二種類用意するといいんじゃないかなって思っている。

.hoge ul.selected:before {
  border-left-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 5px;
 .....
}
.hoge ul.not-selected:before {
  border-left-width: 10px;
  border-right-width: 10px;
  border-bottom-width: 10px;
 .....
}