How to write a CSS Selector for a nested attribute that appears twice?

Question

How do I write a CSS Selector to only retrieve the error message "Enter password"?

<div class="input-label-element">
    <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter username" value>
    <div class="Input-regular Input--help-regular Input--message">Enter username</div>
<div class="input-label-element">
    <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter password" value>
    <div class="Input-regular Input--help-regular Input--message">Enter password</div>

score 1 · Answer 1 · answered Sep 16 '20 at 15:17

1

You can target it using the errorMessage attribute:

[errorMessage="Enter Password"] {
    /* style */
}

answered Sep 16 '20 at 15:17

Dan Mullin

4,285
2
18
34

score 1 · Answer 2 · answered Sep 16 '20 at 15:18

You can use for that the css attribute selectors:

input[errorMessage="Enter password"] {
  border: solid 2px red;
}

<div class="input-label-element">
  <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter username" value>
  <div class="Input-regular Input--help-regular Input--message">Enter username</div>
  <div class="input-label-element">
    <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter password" value>
    <div class="Input-regular Input--help-regular Input--message">Enter password</div>

How to write a CSS Selector for a nested attribute that appears twice?

2 Answers2