Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question] How to select sibling element?

See original GitHub issue

So I want to select .invalid-feedback next to .form-control.

I tried doing .form-control:right-of(.invalid-feedback) or .form-control:near(.invalid-feedback). Both doesn’t work. In JS, I would do document.querySelector('.invalid-feedback').nextElementSibling. So how do I select the next sibling?

Reproduction: https://codesandbox.io/s/inspiring-sun-x9rph or https://github.com/axelthat2/playwright-bug-2

Issue Analytics

State:
Created 2 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

axelthat2commented, Nov 12, 2021

Oh haha my bad. Thanks a lot for your help @DvDream.

For future readers, this works: div.invalid-feedback:near(input.form-control)

0reactions

DvDreamcommented, Nov 12, 2021

@aslushnikov But the selector input.form-control:near(div.invalid-feedback) refers to .invalid-feedback isn’t it? How does it refer to <input>?.

Because in this way you are selecting a tag giving the indication of its position with respect to another one, but the selected tag should be the first, i.e. the input one. Check the doc here: https://playwright.dev/docs/selectors#selecting-elements-based-on-layout