CSSでこの特定の行を選択するにはどうすればよいですか？

Question

<div class="icons"> 
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
</div> 

それぞれのアイコンをdiv内に別々に配置したいのですが、CSSで別々にアイコンを選択するにはどうすればいいですか？ .icons a {はdiv内のすべてのアイコンを編集するので、私は位置を制御できません。

Answer 1

あなたが最初の子と最後の子を使用することができます。

.icons a:first-child { color: red; } // just affects facebook-link 
.icons a:last-child { color: blue; } // just affects twitter-link 

つ以上の子供がいたIIFあなたは単にクラスによって直接リンクのスタイルを設定できも:nth-child(x)

使用することができます

.icons a.fa-twitter { } 

Answer 2

pseudo classで試すことができます。

たとえば、あなたの問題を解決する一つの方法は、次のようになります。

.icons a:first-child {}と.icons a:last-child {}

Answer 3

あなたは、それぞれ独立してアンカータグをターゲットにしようとしている場合（あなたがすでにそこにある便利なクラスを使いたくない場合は）、nth-child疑似セレクタを使用することができます：

.icons > a:nth-child(1){background:red;} 
 
.icons > a:nth-child(2){background:green;}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 

 

 
<div class="icons"> 
 
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
</div>

チェックbrowser support for nth-child。

[1]：あなたはfontawesome fa-facebookとfa-twitterクラスを使用していますが、それらを選択しないでください。

.icons > a.fa-facebook{background:red;} 
 
.icons > a.fa-twitter{background:green;}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 

 

 
<div class="icons"> 
 
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
</div>

---

補遺：他の回答で指摘したようにはい、あなたはfirst-childとlast-childを使用することができます。私はもっ​​と多くのアイコンがあるという前提の下で私の答えを書いていました、そして、提示されたコードはちょうど最小の例です。しかし、2つだけ必要な場合は、first-childとlast-childを自由に使用してください。あなたが試すことができます

Answer 4

の一つは、jQueryを使用してそれらを反復することです：あなたは以上の2人の子供を持っている場合

は

$(".icons a").each(function(index, element){ 
    //index is the current element index 
    //element is the a tag 
}); 

Answer 5

あなたは擬似要素:first-child、:last-childそしてもちろん:nth-child(x)を利用することができます。参照のために下のスニペットを確認してください。

.icons a:first-child { 
 
    color: red; 
 
} 
 

 
.icons a:nth-child(2) { 
 
    color: green; 
 
} 
 

 
.icons a:nth-child(3) { 
 
    color: cyan; 
 
} 
 

 
.icons a:last-child { 
 
    color: yellow; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="icons"> 
 
    <a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
    <a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
    <a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a> 
 
    <a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a> 
 
</div>