es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Seleccionar el CSS secundario sin un elemento específico.

Quiero aplicar estilos de CSS a todos los elementos mat-tab-group sin afectar el estilo del elemento app-form.


<div class="area">
<childhere></childhere>
<mat-tab-group>
<mat-tab *ngFor="..." [label]="label">
<form [formGroup]="formGroup">
<div class="inside-tab">
<mat-form-field>...</mat-form-field>
<mat-form-field>...</mat-form-field>
<mat-form-field>...</mat-form-field>
<mat-form-field>...</mat-form-field>
</div>
<app-form></app-form>
</form>
</mat-tab>
</mat-tab-group>
</div>

He intentado usar la propiedad :not pero no está funcionando.


mat-tab-group > mat-tab > form :not(:last-child){
background-color: #009926; //para probar
}

¿Alguna sugerencia?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para aplicar un estilo CSS en todos los elementos mat-tab-group sin afectar el estilo del elemento app-form, puedes usar el selector CSS :not() de la siguiente manera:

    div.area > mat-tab-group:not(:last-of-type) > mat-tab > form > .inside-tab > mat-form-field {
      background-color: #009926;
    }
    

    Este selector apunta a todos los elementos mat-form-field que son hijos directos de div.area, pero no son el último elemento mat-tab-group. El selector :not(:last-of-type) coincide con todos los elementos mat-tab-group excepto el último. Esto garantiza que el estilo se aplique a todos los elementos mat-tab-group excepto el último.

    Ten en cuenta que este selector es específico para esta estructura HTML en particular y puede necesitar ajustarse si la estructura cambia.

Comments are closed.