くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

css

CSS 直前の要素のセレクタ & beforeとafterで一言

とある要素の直前の要素をCSSセレクタで指定したくなった。

<div>hoge</div> ←これを選択したい
<div class="fuga">fuga</div> ←ここから見て
<div>moge</div>

結論から言うとCSSセレクタではこれは無理っぽい。

兄弟要素(階層が同じ要素)の弟(後に出てくる要素)は選択できるんだけど、

兄(前に出てくる要素)を選択するセレクタはないらしい。。。

DOMの構造見直すか、JavaScript使ってどうにかするしかあるまい。

jQueryなら「.prev()」とかでいけるかな?jQuery使ってないけど。


で、ここから調べてる中で「コレ間違ってるんじゃないかな?」って思った話。

「CSS 直前の要素」でググって出てくるサイトは一杯あるのですが、

疑似要素のbeforeとafterでちょいちょいヒットしてる。

見てみると、beforeの説明でこんな内容になってる。

:before 要素の直前

とか

before / afterでそれぞれ要素の前後に[擬似要素]を追加することができます。

ん?って感じ。

↑の説明だと、構造的に下記をイメージしますよね?

<::before />
<div />
<::after />

要素の直前だからね。実際↑書いてるサイトの構造のイメージはそうなってた。

でも、MDNにはこう書いてある

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。

子要素として 擬似要素を作成します

ですよね。

chromeあたりの開発ツールで見ると分かるのですが、どう見ても指定してる要素の

子要素として作ってるよね?

構造的には下記。


<div class="hoge">
  <.hoge::before />
  <something.... />
  <.hoge::after />
</div>

直前の要素って説明は間違ってると思うのです。

書くなら「before:直下の最初の子要素」とか「after:直下の最後の子要素」が正確な表現かしら?

CSS background-imageの画像を直接CSSにデータとして埋める

タイトル通り。って何言ってんの感じのタイトルですが。

例えば、jsFidlleとかでちょっと試したい時。

手持ちのアイコン画像なんかを背景画像で指定して使おうとすると、

リソースはURL指定しかできないので困る。

そういう時に背景画像をCSS側にBase64でエンコードして埋め込める。

↓こういう事。

SVGのこういうデータを例えばこういうサイトでエンコードして、CSSに上記の感じで埋め込んであげればjsfidleでも画像の埋め込みが出来るというわけです。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>icon-select-expand</title>
  <polyline points="17 9.5 12 14.5 7 9.5" style="fill: none;stroke: #717070;stroke-miterlimit: 10"/>
</svg>

地味に便利。。。

問合せ