web-dev-qa-db-ja.com

兄弟コンビネータで：beforeまたは：after疑似要素をターゲットにできますか？

このCSSが機能しない理由はありますか？

http://jsfiddle.net/6v5BZ/

a[href^="http"]:after {
    content:"";
    width:10px;
    height:10px;
    display:inline-block;
    background-color:red;
}

a[href^="http"] img ~ :after {
    display:none;
}

..このHTMLで？

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

アイデアは、一致するアンカータグに疑似要素を持たせることです。ただし、画像をラップするアンカータグには適用したくありません。また、a < imgのようなものを使用してアンカーをターゲットにすることはできないため、兄弟である画像を見つけることで、：after疑似要素をターゲットにできるかもしれないと考えました。

どんな洞察も大歓迎です。

csscss-selectorspseudo-element
33
jkupczak

コンテンツがDOMでレンダリングされず、操作されないため、：afterをターゲットにすることはできません。これを機能させるには、DOMを再レンダリングする必要があり、CSSはこのように操作できません。

詳細な理解については、仕様を確認してください。 http://www.w3.org/TR/CSS2/generate.html#propdef-content

生成されたコンテンツはドキュメントツリーを変更しません。特に、それはドキュメント言語プロセッサにフィードバックされません（例えば、再解析のために）。

JavaScriptを使用して作業を行うことをお勧めします。

19
easwee