Блог

Я пытаюсь стилизовать aria-expanded атрибут accordion-header класса bootstrap 4 с помощью SASS.

Возможно ли это?

HTML код:

 <div class="accordion">
    <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
        Slide Title
    </div>
    <div class="accordion-body collapse" id="collapse_1" style="">
        This is the first slide. 
    </div>
</div>
  

Код SASS::

 .accordion{
    .accordion-header{
        position: relative;
        padding: 1rem;

        font-size: 18px;
        font-weight: bold;

        amp;.[aria-expanded="true"]{
          background-color: red;
        }
    }
}
  

Я обнаружил, что для таргетинга на aria-expanded атрибут мне нужно просто убрать точку перед селектором, поэтому я изменил код из этого:

 amp;.[aria-expanded="true"]{
  background-color: red;
}
  

к этому:

 amp;[aria-expanded="true"]{
   background-color: red;
}