CODEWITHSUNDEEP
htmlcss
Sics Arts
Sics Arts

Reputation: 23

Displaying only the first item and hiding the rest with CSS - no <li>

sorry for the potentially dumb question.

I'm trying to hide three icons out of four, only want to keep the first one. The problem is, they do not seem to be part of a list.

Tried doing this:

.side_menu_wrapper a .social_icon li:nth-child(2) {
    display: none; }

But it does nothing.

The html piece looks like this: 

<a href="https://www.facebook.com/pg/..." class="social_icon"><i class="fa fa-facebook"></i></a>
<a href="" class="social_icon"><i class="fa fa-twitter"></i></a> //want this gone
<a href="" class="social_icon"><i class="fa fa-pinterest"></i></a> //want this gone 
<a href="" class="social_icon"><i class="fa fa-tumblr"></i></a> //want this gone

Is there a css solution to this?

Thanks!

Upvotes: 0

Views: 1657

Answers (3)

jkythc
jkythc

Reputation: 430

a.social_icon { display: none; }
a.social_icon:first-child { display: block; }

Hidden all .social_icon class and show first child of .social_icon

jsfiddle demo

Upvotes: 1

Christian Santos
Christian Santos

Reputation: 5456

You can use nth-child on other selectors, not just li selectors. Also, because .social-icon is part of the <a> element, you should delete the space between a and .social_icon.

nth-child accepts functional notation, which can be used to select all elements except the first:

.side_menu_wrapper a.social_icon:nth-child(n + 1) {
    display: none; 
}

Upvotes: 1

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

a{
  display:none;
}
a:first-child{
  display: block;
}
<a href="https://www.facebook.com/pg/..." class="social_icon"><i class="fa fa-facebook">fb</i></a>
<a href="" class="social_icon"><i class="fa fa-twitter">tw</i></a> 
<a href="" class="social_icon"><i class="fa fa-pinterest">pin</i></a> 
<a href="" class="social_icon"><i class="fa fa-tumblr">tum</i></a>

Upvotes: 2

Related Questions