CODEWITHSUNDEEP
htmlcss
Stacey
Stacey

Reputation: 29

How can I select this specific line in CSS?

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

I would like to position each icon in the div seperately, how could I select the icons seperately in CSS? .icons a { edits all of the icons in the div so I have no control over the positioning.

Upvotes: 0

Views: 1718

Answers (5)

Theraot
Theraot

Reputation: 40315

If you are trying to target each anchor tag independently (and you don't want to use the handy classes you already have in there[1]), you can use the nth-child pseudo selector:

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

Check browser support for nth-child.

[1]: You are using fontawesome fa-facebook and fa-twitter classes, why not select those?

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

Addendum: Yes, you can use first-child and last-child as pointed in other answers. I did write my answer under the assumption that there will be more icons, and the presented code is just a minimun example. Yet, if you only need two, feel free to use first-child and last-child.

Upvotes: 2

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

You can make use of pseudo elements :first-child, :last-child and of course :nth-child(x) if you have more than 2 children. Check below snippet for reference.

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

Upvotes: 0

Mihail Stancescu
Mihail Stancescu

Reputation: 4138

One thing you can try is to iterate over them using jQuery:

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

Upvotes: -2

Simon Kraus
Simon Kraus

Reputation: 736

You can use first-child and last-child. 

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

iIf there were more than two children you could use :nth-child(x)

also you could simply style the links directly by class:

.icons a.fa-twitter { }

Upvotes: 3

banna
banna

Reputation: 249

You can try with a pseudo class.

For example, one way to solve your problem would be:

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

Upvotes: 1

Related Questions