0

隣り合って表示される div 要素がいくつかあります。

<div class="parentdiv">
    <div class="article-teaser-text2">
            some text ...<a href="http://example.com">Lees meer</a>      
    </div>
    <div class="article-teaser-image">
            <img src="somimage.png" >      
    </div>
</div>

2 番目の div に画像が含まれていない場合、最初の div を広くしたい

div.article-teaser-text2ifを選択することは可能ですかdiv.article-teaser-image > img

私は次のように考えました：

div.article-teaser-image > img ~ div.article-teaser-text2

しかし、私が間違っていなけれdiv.article-teaser-text2ば、それが兄弟である場合、それはを選択します。img

これができるのはjQueryですが、CSSソリューションを探しています

4

1 に答える 1

0

いいえ。現在の仕様にはそのようなセレクターがなく、正当な理由があります。この類推を考えてみましょう。

人間として、私たちは親の特徴、つまり肌の色、目の色、身長、その他の多くの身体的属性を受け継いでいます。現在、これらの特性の一部またはすべてを自由にオーバーライドできますが、親の特性を定義することはできません。

この類推を CSS に当てはめて、子要素が親の特性を決して定義してはならないことを理解してください。

この戦略を適用すると解決策があります。

<div class="parentdiv HASimage">
    <div class="article-teaser-text2">
            some text ...<a href="http://example.com">Lees meer</a>      
    </div>
    <div class="article-teaser-image">
            <img src="somimage.png" >      
    </div>
</div>

クラス「HASimage」をどのように追加したかに注目してください。子にイメージがあるかどうかを区別するために、特定のクラスを親に追加します。これは、PHP または任意のサーバー側言語で簡単に実行できます。css で次のようにします。

.parentdiv .article-teaser-image {
     normal traits (without image)
}
.parentdiv.HASiamge .article-teaser-image {
     override traits and add extra traits (with image)
}

それがあなたを正しい方向に押し進めることを願っています。

よろしく。

于 2013-06-24T15:36:33.823 に答える