:valid pseudoclass has greater priority than a custom class defined later

Question

CSS styles defined later should have greater priority (if the selectors are have the same strength). For instance:

/* Let's make it red */
h1 {
  color: red;
}

/* Well... actually blue */
h1 {
  color: blue;
}

<h1>Hello World</h1>

I was expecting the same thing to happen for input:valid and input:invalid, but it seems like input:valid is stronger than input.is-valid (a custom class defined later).

Here is an example:

$("button").click(function () {
 $("input").addClass("is-invalid")
})

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

.is-invalid {
  /* Without adding !important, this isn't applied */
  border: 2px solid orange !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required>
<button>Run custom validation and declare it .is-invalid</button>

So, if we do not add !important to the .is-invalid class, input:valid and input:invalid will still have greater priority.

How should I address this? Is it a browser bug/feature?

Possible duplicate of [CSS: Understanding the selector's priority / specificity](https://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity) — jonny, Nov 22 '17 at 06:10
as @JonathanBrooks says it's because of specificity. if you declare rule as input.is-invalid it would override input:invalid/input:valid rules — skyboyer, Nov 22 '17 at 18:45

score 1 · Accepted Answer · answered Mar 11 '19 at 09:06

1

It's about the priority of the selectors: .is-invalid will be more important than input:valid.

answered Mar 11 '19 at 09:06

GhitaB

3,275
3
33
62

:valid pseudoclass has greater priority than a custom class defined later

1 Answers1