다른 아이가 이미지를 가지고있는 경우 CSS를 선택하십시오.

Question

서로 옆에 나타나는 div 요소가 있습니다.

: 두 번째 DIV는

그것을 추적 할 수없는 가망 같은 생각 div.article-teaser-text2

div.article-teaser-image > img 경우 뭔가를 선택하는 이미지를 포함하지 않는 경우

<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> 

는 내가 처음 사업부 넓은 만들고 싶어

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

하지만 내가 잘못하지 않았다면 형제가 img 인 경우 div.article-teaser-text2을 선택합니다.

나는 내가 할 수있는 알이 jQuery를하지만 난이 CSS 솔루션

Answer 1

번호 현재의 사양은 셀렉터 및 좋은 이유가없는 찾고 있어요. 이 비유를 생각해보십시오.

인간으로서 우리는 피부색, 눈 색깔, 높이 및 기타 여러 가지 phyical 속성의 무리 - 우리 부모님의 특성을 상속합니다. 이제 우리는 이러한 특성의 일부 또는 전부를 자유롭게 무시할 수 있지만 결코 부모의 특성을 정의 할 수 있습니다.

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) 
} 

희망을 올바른 방향으로 밀어줍니다.

감사합니다.