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

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

In this article, we’ll look at how to use aria-expanded="true" to change a CSS property.

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

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

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" to change a CSS property, we can use the aria-expanded="true" selector.