CODEWITHSUNDEEP
csswordpresscss-selectors
AMV
AMV

Reputation: 13

Trying to select a specific link that doesn't have it's own class

I'm new to this advanced CSS stuff and am trying to figure out if there is a way to select just the first tag in the code below. Each link is within a div, and they all have the same class, so if I CSS to .jetpack-social-widget-item a it is applying to them all. I just want to css the first one. Is that possible without editing the code and manually adding a class to it? It's a theme so I'd prefer not to edit the code.

<ul class="jetpack-social-widget-list size-large">
<li class="jetpack-social-widget-item"><a href="#" target="_blank">Facebook</a>
                        </li>
<li class="jetpack-social-widget-item"><a href="#" target="_blank">Twitter</a>
                        </li>
<li class="jetpack-social-widget-item"><a href="http://instagram.com" target="_blank">Instagram</a>
                        </li>
</ul>

Upvotes: 0

Views: 34

Answers (2)

NAM KIM
NAM KIM

Reputation: 23

You can do this a variety of ways. Here's a couple:

.jetpack-social-widget-item:first-child a {
    color: red;
}

.jetpack-social-widget-item:nth-child(1) a {
    color: red;
}

Upvotes: 0

git-e-up
git-e-up

Reputation: 904

.jetpack-social-widget-item:first-of-type a {
  color: red;
}

See here for more advanced examples: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Upvotes: 2

Related Questions