Question 206014 in CSS Question posted in
Some basic documentation can be found here.

Css – Can't able to style properly in Angular16

app.component.html

<div>
    <app-cards *ngFor=" let card of cards; index as i; 
                        first as isFirst; last as isLast; odd as isOdd; even as isEven" 
        [cardIndex]="i+1" (outputValue)="onCardSelected($event)" [inputValue]="card" 
        [class.isFirst]="isFirst" [class.isEnd]="isLast" [class.isOdd]="isOdd" [class.isEven]="isEven">
    </app-cards>
</div>

cards.component.html

<div>
    <h1>{{index + '. ' + webSeries.name}}</h1>
    <img [src]="webSeries.image" />
    <button (click)="onWebSeriesView()">Watch Series</button>
</div>

app.component.css

app-cards.isFirst{
    border: 1rem solid black;
    padding: 1rem;
}

Output is :-

enter image description here

CSS Border & Padding is not applied properly. Am I doing anything wrong?

Tags:

2

Answers


  1. 0

    Assuming isFirst boolean is true then just having the CSS selector should work:

    .isFirst {
    border: 1rem solid black;
    padding: 1rem;
}

    You may need to consider adding !important to styles to override defaults.

    .isFirst {
    border: 1rem solid black !important;
    padding: 1rem !important;
}

    If you want to target add space before the selector:

    app-cards .isFirst {
    border: 1rem solid black;
    padding: 1rem;
}

    The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

    Read more about descendant selector here: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator

    Login or Signup to reply.
  2. 0

    By defect a component has display:inline. So you need take acount about this. generally you can simply add, e.g.display:block or display:inline-block.

      my-card.isFirst{
    border:1px solid red;
    display:block;
    background:yellow;
  }
  //or simply
  .isFirst{
    border:1px solid red;
    display:block;
    background:yellow;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search