複数のdivで最初のimgをターゲットにする方法

Question

このHTML構造の最初のimgを擬似要素でターゲティングしようとしています。

<div class="blog"> 
    <div 
    <h3></h3> 
    </div> 
    <div> 
    <div class="image"> 
     <a> 
     <img> 
     </a> 
    </div> 
    </div> 
    <div> 
    <div class="image"> 
     <a> 
     <img> 
     </a> 
    </div> 
    </div> 
</div> 

私は多くの組み合わせを試しましたが、何もしませんでした。これはおそらく私がこれまでに持っている最良の組み合わせですが、imgが.blogの2番目のdivである場合にのみ機能します。最初のimgは、位置に関係なくターゲティングする必要があります。

.blog > div:nth-of-type(2) > .image > a > img 

Answer 1

することができますこれを扱いやすくするためにjQueryでリレーする：.has() function

親が見つかったら、クラスを追加してください.addClass()

あなたのスタイルシートにそのクラスを作成します。

似たようなクラスの兄弟がいるかもしれません。

あなたはすべてのsibblingsが~セレクタあなたはJavascriptを必要とする

$(".blog > div").has(".image").addClass(" seenAtFirst");

/* set regular and reset next similar targets */ 
 
.blog>div, 
 
.seenAtFirst ~ .seenAtFirst { 
 
    border:none; 
 
    background:turquoise; 
 
    color:black; 
 
    text-align:initial;/* initial can also be used to reset style */ 
 
} 
 
/* set my first target*/ 
 
div.seenAtFirst { 
 
    border:solid green; 
 
    color:white; 
 
    background:tomato; 
 
    text-align:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="blog"> 
 
    <div> 
 
    <h3>title</h3> 
 
    </div> 
 
    <div> 
 
    <div class="no-image"> 
 
     <a> 
 
     <img>no-img 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="image"> 
 
     <a> 
 
     <img>Target me and reset also next ones if any. 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="image"> 
 
     <a> 
 
     <img>img 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="image"> 
 
     <a> 
 
     <img>img 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="image"> 
 
     <a> 
 
     <img>img 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

まあ私は考えることができる最も簡単な方法は、あなたがそれのidでそれを追跡することができますので、それにIDを与えることです、このような：

img#first_img { 
 
    
 
}

<div class="blog"> 
 
    <div 
 
    <h3></h3> 
 
    </div> 
 
    <div> 
 
    <div class="image"> 
 
     <a> 
 
     <img id="first_img"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="image"> 
 
     <a> 
 
     <img> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>