What is the difference between ng-valid[required], .ng-valid.required?

Question

I was going through https://angular.io/docs/ts/latest/guide/forms.html as exercise then I came through this piece of code:

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

Why are both of .ng-valid[required], .ng-valid.required selectors used at the same time and cant we just replace this by only one of them?

Answer 1

The .ng-valid[required] rule is valid for

<input class="ng-valid" required>

The .ng-valid.required rule is valid for

<input class="ng-valid required">

Both rules are valid for

<input class="ng-valid required" required>

Now you can choose which solution you want to use and remove the not necessary rules on your CSS.