0

I have the following code addressing the currency-field parent selector:

.currency-field {
  .ng-invalid & {
    border: 1px solid $color-failure;
  }
}

I have several class="currency-field" tags in the html and all of them get referenced by the ng-invalid class even though only one of the fields has the ng-invalid class. I want to modify the above code so that only the .currency-field tag with the .ng-invalid class is referenced. I want to put a border on the parent currency-field when the child input tag contains the ng-invalid class.

fortesl
  • 314
  • 2
  • 13
  • The desired CSS is what, exactly? – cimmanon Mar 03 '15 at 15:39
  • In your second line of code (`.ng-invalid &`), `&` will be replaced with the parent selector. This means that the selector in the compiled CSS will be `.ng-invalid .currency-field` (meaning, an element with the class `currency-field` inside of another element with the class `ng-invalid`). This is probably not what you want, see Mike's answer for a solution. – Nick McCurdy Mar 03 '15 at 15:43
  • Mike's answer does not work because currency-field is a parent selector. I need to access the parent selector – fortesl Mar 03 '15 at 16:39
  • Ok, so what you're *actually* asking is this: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – cimmanon Mar 03 '15 at 16:57
  • Used JS to add an extra class on the currency-field. Problem Solved. Thanks – fortesl Mar 03 '15 at 18:47

1 Answers1

1

Change your syntax if you want to have .currency-field tag with the .ng-invalid class is referenced (.currency-field.ng-invalid)

.currency-field {
  &.ng-invalid {
    border: 1px solid $color-failure;
  }
}
Mike Vranckx
  • 5,437
  • 3
  • 22
  • 27
  • I cannot really do that because the ng-invalid class is set dynamically to the input tag nested into the currency-field tag. Here is how the html looks like:
    – fortesl Mar 03 '15 at 15:50
  • So you want to put a border on the `currency-field` when the child input tag contains the `ng-invalid` class? – Mike Vranckx Mar 03 '15 at 16:02
  • Yes, exactly Mike. Thank you. – fortesl Mar 03 '15 at 16:42
  • Unfortunately it is not possible to do this with pure css ... You should either change your slicing and put styling directly on the `ng-invalid` or use JS to add an extra class on the `currency-field` when the child element has the `ng-invalid` class. – Mike Vranckx Mar 03 '15 at 16:56
  • Used JS to add an extra class on the currency-field. Problem Solved. Accepted your answer with the additional info. Thanks – fortesl Mar 03 '15 at 18:45