"AND" operator in CSS selectors

Question

I'm pretty familiar with xpath but not so much using css selectors in order to find a certain element.

I know this xpath //input[contains(@value, "15.02.2022") would result into this css-selector input[value*="15.02.2022"].

But how would you translate this xpath //input[contains(@value, "15.02.2022") and contains(@value, "123")] into a css selector?

How would you use the "AND" operator to find a certain element?

Chain the selectors together: `input[value*="15.02.2022"][value*="123"]` — David Thomas, May 03 '22 at 13:42

score 2 · Accepted Answer · answered May 03 '22 at 13:56

Generally speaking, you aren't restricted to only one selector of a kind (with the notable exception of element selectors, for obvious reasons):

.a.b {
    color: green;
}

<span class="a">Only A</span>
<span class="b">Only B</span>
<span class="a b">Both A and B</span>

Attribute selectors work the same way:

input[value*="15.02.2022"][value*="123"] {
    color: green;
}

<input value="Only 15.02.2022">
<input value="Only 123">
<input value="Both 15.02.2022 and 123">

1 Answers1