Changing label for input with CSS in Angular-CodePudding

I would like to change the css of all labels for all inputs that are disabled. I currently use this in a global scss style sheet:

  ::ng-deep input:disabled label {
    color: rgb(223, 107, 107) !important;
  }

<label for="someLabel">someLabel</label>
<input id="someLabel" disabled>

But the css is not applied to the label.

CodePudding user response：

The plus sign is used to select the elements that are placed immediately after the specified element. Therefore your CSS is looking for a label tag after a disabled input tag.

You can achieve more or less the same result like that:

input:disabled   label {
  color: rgb(223, 107, 107) !important;
}


.flex {
  display: flex;
  flex-direction: row-reverse;
  float: left;
}

<div >
  <input id="someLabel" disabled />
  <label for="someLabel">someLabel</label>
</div>

CodePudding user response：

You can use :has() selector to find previous selector like below:

label:has(  input:disabled) {
   color: rgb(223, 107, 107);
}