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

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>

Dan Mullin · Accepted Answer · 2020-09-16 15:17:58Z

1

You can target it using the errorMessage attribute:

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

answered Sep 16, 2020 at 15:17

Dan Mullin

4,4383 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

johannchopin · Accepted Answer · 2020-09-16 15:18:58Z

1

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>

answered Sep 16, 2020 at 15:18

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related