CODEWITHSUNDEEP
htmlcss
ilmincione
ilmincione

Reputation: 3

How to apply color to a specific a tag?

I've the following structure:

<li class="dsq-widget-item">     
    <a href="https://disqus.com/by/"><img class="dsq-widget-avatar" src="#"></a>
    <a class="dsq-widget-user" href="https://disqus.com/by//">Foo</a>    
    <span class="dsq-widget-comment">
         <p>Hello</p>
    </span>  
    <p class="dsq-widget-meta">
        <a href="#">How to</a>&nbsp;·&nbsp;<a href="#">19 minutes ago</a>
    </p>
</li>

how you can see I've three a tag, I need to apply a custom color (like blue for example) only to the second a tag.

Actually all the links have this class:

.widget a {
color: #777;
}

any solution

Upvotes: 0

Views: 98

Answers (3)

Jay Patel
Jay Patel

Reputation: 2451

I've Just put this code in stylesheet and you'll get the desired output

.dsq-widget-item > a:nth-child(2){
    background-color: red;
}

here I have used Child Selector, you can refer more from here

Working Code: 

.dsq-widget-item > a:nth-child(2){
			background-color: red;
		}
<li class="dsq-widget-item">     
    <a href="https://disqus.com/by/"><img class="dsq-widget-avatar" src="#"></a>
    <a class="dsq-widget-user" href="https://disqus.com/by//">Foo</a>    
    <span class="dsq-widget-comment">
         <p>Hello</p>
    </span>  
    <p class="dsq-widget-meta">
        <a href="#">How to</a>&nbsp;·&nbsp;<a href="#">19 minutes ago</a>
    </p>
	</li>

Upvotes: 1

tech2017
tech2017

Reputation: 1806

.dsq-widget-item a:nth-child(2) {
    color: #777;
}

or if you are sure:

.dsq-widget-user {color: #777;}

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53709

The second link has a class, so just use that to target it.

a {
color: #777;
}

.dsq-widget-user {
  color: red;
}
<li class="dsq-widget-item">     
    <a href="https://disqus.com/by/"><img class="dsq-widget-avatar" src="#"></a>
    <a class="dsq-widget-user" href="https://disqus.com/by//">Foo</a>    
    <span class="dsq-widget-comment">
         <p>Hello</p>
    </span>  
    <p class="dsq-widget-meta">
        <a href="#">How to</a>&nbsp;·&nbsp;<a href="#">19 minutes ago</a>
    </p>
</li>

Upvotes: 0

Related Questions