css Question posted in
Some basic documentation can be found here.

First child – SCSS

I have this HTML

<div class="options-panel">
    @for (action of sortingActions) {
      @if (!action.hasChildren) {
        <app-options-item
          [columns]="columns"
          [action]="action"
          (buttonClicked)="changeSorting(theadCol.sorting, action.direction)"></app-options-item>
      } @else {
        <app-options-item class="options-divider"
                                    [columns]="columns"
                                    [action]="action"></app-options-item>
      }
    }

</div>

and this CSS

  .options-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 200px;
    padding: 8px 0;
    border-radius: 4px;

   }

I’m trying to put a background color only for the first child with the options-divider class.

If I put a background color only for the class and not the first child the class gets the background color.

I tried these options

.options-divider:nth-of-type(1) {
      background-color: #FF5733; 
    }

options-divider:first-of-type {
      background-color: #FF5733;
    }

 app-options-item:has(.options-divider):first-of-type {
      background-color: palegoldenrod;
    }

why is not it working?

Tags:

3

Answers


  1. 0

    you can check if it is the first item by checking the index of array inside the @for

    @for(action of sortingActions;let idx = $index){
  <div [ngClass]="{'options-divider-first':idx === 0}">{{action}}</div>
}

    Please refer angular documentation too

    https://angular.io/api/core/for#-index-and-other-contextual-variables-

    Login or Signup to reply.
  2. 0

    Looks like something is wrong with your HTML and not CSS.

    using this simplified HTML structure:

    <div class="options-panel">
  <div class="options-divider"> 
    one
  </div>
  <div class="options-divider"> 
    two
  </div>
  <div class="options-divider"> 
    three
  </div>
  <div class="options-divider"> 
    four
  </div>
  <div class="options-divider"> 
    five
  </div>
</div>

    and your styles, it’s working as expected.

    https://jsfiddle.net/1muo9h60/

    Login or Signup to reply.
  3. 0

    We can use ::ng-deep to make the changes visible to the child components, I use :first-child to make the first div of the component with class options-divider to be red in color!

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { OptionsItemComponent } from './app/options-item/options-item.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [OptionsItemComponent],
  styles: [
    `
    .options-panel {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 200px;
      padding: 8px 0;
      border-radius: 4px;
    }
    ::ng-deep .options-divider div:first-child {
      background-color: #FF5733; 
    }
  `,
  ],
  template: `
    <div class="options-panel">
        @for (action of sortingActions; track $index) {
          @if (!action.hasChildren) {
            <app-options-item
              [columns]="columns"
              [action]="action"
              (buttonClicked)="changeSorting(theadCol.sorting, action.direction)"></app-options-item>
          } @else {
            <app-options-item 
              class="options-divider"
              [columns]="columns"
              [action]="action"></app-options-item>
          }
        }
    </div>
  `,
})
export class App {
  name = 'Angular';
  columns = [];
  theadCol = {
    sorting: 'asc',
  };
  sortingActions = [
    {
      hasChildren: true,
      direction: 'forward',
    },
    {
      hasChildren: true,
      direction: 'forward',
    },
    {
      hasChildren: true,
      direction: 'forward',
    },
    {
      hasChildren: true,
      direction: 'forward',
    },
  ];

  changeSorting(a: any, b: any) {}
}

bootstrapApplication(App);

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search