How to use aria-expanded=”true” to change a CSS property?

Sometimes, we want to use aria-expanded=”true” to change a CSS property.

We’ll look at, how to use aria-expanded=”true” to change a CSS property, in this article.

How to use aria-expanded=”true” to change a CSS property?

To use aria-expanded=”true”, we can use the aria-expanded="true" selector, to change a CSS property.
For instance, we write

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

to add 2 links.
Then we write

a[aria-expanded="true"] {
  background-color: #42dca3;
}

to select the a elements with the aria-expanded attribute set to true and set their background color to #42dca3.

Conclusion

To use aria-expanded=”true”, we can use the aria-expanded="true" selector, to change a CSS property.