隣接する兄弟の子供にスタイルを適用する

Question

同じ行にある画像の数に基づいて、CSSを使用して画像をサイズ変更しようとしています。たとえば、同じpに4つのimg要素がある場合、それらは特定の方法でスタイルされます。

HTML：：

<p> 
    <img src="preview.png"> 
    <img src="preview.png"> 
    <img src="preview.png"> 
    <img src="preview.png"> 
</p> 

CSS：

.post-content p img:first-child:nth-last-child(4), 
.post-content p img:first-child:nth-last-child(4) ~ img { 
    width: 25%; /* fallback for browsers that don't support calc */ 
    width: calc((100%/4) - 0.8%); 
    margin-left: calc(1%); 
} 

.post-content p img:first-child:nth-last-child(4) { /* First image in group of four */ 
    margin-left: 0; 
} 

結果は次のようになります。

ここ this answerに基づいて作業コードは、あります

しかし、これはaタグに包まれたイメージのために動作しませんが、書式設定、同一の残りの部分で、次のように：

<p> 
    <a href="#"><img src="preview.png"></a> 
    <a href="#"><img src="preview.png"></a> 
    <a href="#"><img src="preview.png"></a> 
    <a href="#"><img src="preview.png"></a> 
</p> 

私はこのケースで解決策を見つけることができません。どんな助けでも大歓迎です。

Answer 1

ある:nth-child()年代、:first-child年代、及び兄弟セレクタはaタグのオフに基づいてする必要が、それらは、子供や兄弟であるため、その後のセレクタは、標的にimgで終わるべきです画像のCSSプロパティ。

p a:first-child:nth-last-child(4) img, 
 
p a:first-child:nth-last-child(4) ~ a img { 
 
    width: 25%; 
 
    width: calc((100%/4) - 0.8%); 
 
    margin-left: calc(1%); 
 
} 
 

 
p a:first-child:nth-last-child(4) img { 
 
    margin-left: 0; 
 
}

<p> 
 
    <a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a> 
 
</p>

Answer 2

CSSのfirst-childの前にimgをaに置き換えてみましたか？すなわち、

.post-content p a:first-child:nth-last-child(4) img, 
.post-content p a:first-child:nth-last-child(4) ~ a img { 
    width: 25%; 
    width: calc((100%/4) - 0.8%); 
    margin-left: calc(1%); 
} 

.post-content p a:first-child:nth-last-child(4) img { 
    margin-left: 0; 
}