yagisukeのWebなブログ

フロントエンドとサーバーサイドをさまようエンジニア

:before擬似要素に隣接セレクタをつけて直後の要素にスタイルを当てたらどうなるか

f:id:yagi_suke:20141116011427p:plain

デベロッパツールのHTMLを見て、::beforeに隣接セレクタで直後の要素にスタイルを当てられるんじゃない??と前々から密かに思っていたので実験してみました。

仮にスタイルを当てられるとしても、使う場面はないと思いますがワラ

HTML
<p class="text">
    <span class="text__mess">ためしてがってん!!</span>
</p>
CSS
.text:before { content: ""; }
.text:before + .text__mess { color: red; }


それでは結果です。
macにインスールしたChromeで確認しました。

f:id:yagi_suke:20141116013025p:plain

テキストが赤くなっていないため、
:before擬似要素に隣接セレクタをつけても直後の要素にスタイルを当てることができない。 といことが分かりました。

はい、どうでもよい実験でした。
おしまい

:before擬似要素についてわからない方はこちら。
隣接セレクタってなによって方はこちら。