How to style for first class css

Question

I have class="social" in a HTML block like this:

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#" class="social">Facebook</a></li>
  <li><a href="#" class="social">Instagram</a></li>
  <li><a href="#" class="social">Youtube</a></li>
</ul>

How can I style the first element with class="social". I've tried using different ways but it did not work as expected. More better if using only CSS.

Duplicate - http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name — Paulie_D, Dec 08 '15 at 16:28

score 2 · Accepted Answer · answered Dec 08 '15 at 16:22

2

You could do this with jQuery but i'm not aware of a way to make this work with just CSS as no :first-of-class exists

$('a.social').eq(0).addClass('first');

.social.first {color: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#" class="social">Facebook</a></li>
  <li><a href="#" class="social">Instagram</a></li>
  <li><a href="#" class="social">Youtube</a></li>
</ul>

answered Dec 08 '15 at 16:22

Aaron

9,797
3
22
38

If there is no solution with css, I will use your way. Thank you so much. – Hai Tien Dec 08 '15 at 16:24
You could use the nth-of-type css selector. it would be something like .social:nth-of-type(1) – Flignats Dec 08 '15 at 17:15
you can 't use `:nth-of-type` to select a number of a class. – Aaron Dec 08 '15 at 17:16

How to style for first class css

1 Answers1