89

I want to use aria-expanded="true" to change a css property like an active class :

<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>

I want the <a> to background-color: #42DCA3 but only when aria-expanded="true".

4 Answers 4

225

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>

4
  • 7
    5 years later and still helping to save lines of code.
    – ARNON
    Commented Apr 12, 2021 at 23:56
  • What do you do to change the background of the li container?
    – Dgloria
    Commented Jul 13, 2022 at 8:50
  • @Dgloria It was impossible when I created the answer, but now you can use the new :has() selector. li:has(a[aria-expanded="true"]){background-color: #42DCA3;} Only working in Safari right now. If you want it now, you can either add a class to the LI or add ::after and ::before pseudo elements to the A that mock the desired result.
    – Sergio Tx
    Commented Jul 13, 2022 at 9:19
  • 1
    :has() is now available in Chrome 105
    – Sergio Tx
    Commented Sep 1, 2022 at 8:17
18

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>

2

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.

0
0

If you were open to using JQuery, you could modify the background color for any link that has the property aria-expanded set to true by doing the following...

$("a[aria-expanded='true']").css("background-color", "#42DCA3");

Depending on how specific you want to be regarding which links this applies to, you may have to slightly modify your selector.

2
  • yep thats fine, i am using no other aria-expanded. where would i put this piece of code? just in the head. Thanks Commented Oct 7, 2016 at 22:29
  • or actually how do i use this at all, never used jquery before Commented Oct 7, 2016 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.