Search code examples
cssangularbootstrap-5bootstrap-accordion

Bootstrap Accordion border top not first item

I'm using bootstraps accordions in a Angular application and I would like to have a border with color at everyone al around. By standard bootstrap removes the top border if the accordion not the top one. I have tried everything I can figure out.

What I can se it is

.accordion-item:not(:first-of-type) {
    border-top: 0;`

that removes the top border.

I have tried:

.accordion-item:{
    border-top:4px !important;
}

.accordion-item:{
    &:not(:first-of-type) {
        border-top: 4px !important;
    }
}

the last one results in this computed at that element: accordion not having top border

I have tried to add margins between the accordions, It don't help

I cant find what's overwriting it. Anyone know?

EDIT: Adding solid solved the problem but gave me a new one: I render the border color dynamically depending on a variable i the accordion. I get i like this:

    <div
      *ngFor="let finding of findings"
      class="accordion-item"
      [ngStyle]="{
        'border-color': finding.level.color,
        'border-top-color': finding.level.color
      }"
    >

But the top border on the accordions that are not first is always black (se picture) top border black color

This is how the css file looks

.accordion-item{
    border-width: 4px !important;

    &:not(:first-of-type) {
        border-top: 4px solid !important;
      }
}

Anyone know how to solve this?

Solution 
  • .accordion-item:not(:first-of-type) {
    border-top: 4px solid blue;
}

    When dealing with styles in Angular applications, it's important to consider the component based nature of angular and how styles are encapsulated within components.

    Try and do let me know how it works.