How to use aria-expanded="true" to change a css property
You could use querySelector() with attribute selector '[attribute="value"]', then affect css rule using .style, as you can see in the example below:
document.querySelector('a[aria-expanded="true"]').style.backgroundColor = "#42DCA3";<ul><li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="network-name">Google+ with aria expanded true</span></a>
</li>
<li>
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> <span class="network-name">Google+ with aria expanded false</span></a>
</li>
</ul>jQuery solution :
If you want to use a jQuery solution you could simply use css() method :
$('a[aria-expanded="true"]').css('background-color','#42DCA3');
Hope this helps.
li a[aria-expanded="true"] span{
color: red;
}<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>li a[aria-expanded="true"]{
background: yellow;
}<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>Why javascript when you can use just css?
a[aria-expanded="true"]{
background-color: #42DCA3;
}<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>