How to apply css styles to an element sharing same class name as another element with out affecting the other element's style

[Tanmay14]

Hi,

In New York instance, I have 2 catalog variables with common class name elements.

Element 1 'Name' is of type Label

Html path of this element is ‘div.ng-scope label.ng-binding’

Here,

div class name – ng-scope
label class name - ng-binding

Element 2 'First Name' is of type Single Line Text field

Html path of this element is ‘div.form-group.ng-scope.ng-isolate-scope label.field-label.ng-binding.ng-scope’

Here,

div class name – form-group ng-scope ng-isolate-scope
label class name - field-label ng-binding ng-scope

When I apply a CSS on element 1 (Label) as below it gets applied to element 2's label (Single Line Text) as well. I do not want to apply css to element 2:

Label css -

label.ng-binding{
  color:white;
  background-color: $navbar-inverse-bg;
  padding:4px;
  width:100%;
} 

In order to not apply above css on element 2, I even separately set css for single line text as below:

label.field-label.ng-binding.ng-scope{
  color:white;
  background-color: transparent;
  padding:4px;
  width:100%;
}

Still css of label is getting applied to single line text.

Tried full path as well as below:

div.ng-scope label.ng-binding{
  color:white;
  background-color: $navbar-inverse-bg;
  padding:4px;
  width:100%;
}

div.form-group.ng-scope.ng-isolate-scope label.field-label.ng-binding.ng-scope{
  color:white;
  background-color: transparent;
  padding:4px;
  width:100%;
}

Applying css via widget.
How can I avoid applying css to single line text field's label.

[Justin77]

For best practices sake, I would recommend not using specific selectors like that, as ServiceNow reserves the right to change their element names and orders on upgrades (they've done this multiple times in the past).  The alternative solution if you need a custom design would be to create a widget and add it as a macro variable.  If you absolutely have to accomplish this with just CSS, child/nth selectors may be the way to go: https://www.w3schools.com/cssref/sel_nth-child.asp  Again, doing this purely with CSS isn't going to be a scalable or maintainable solution, which is why I strongly suggest the widget.