Input + span {} meaning of this CSS selector

Hello,

I came across a CSS selector like this several times in the guides:

input + span {}

I tried the document.querySelector(“input+span”) but it returns null.

What does this CSS selector select?

Thank you!

Hello @renker.benjamin

could you share the full code on any online service like codepen.io or jsfiddle to check what the issue

and have a nice day :slight_smile:

2 Likes

Hello justsomeone,

I actually found out its meaning - it’s the adjacent sibling selector and get’s all span elements that come just after an input element.

It appears in the code for styling forms towards the beginning in this guide: https://developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes

Have a nice day!

2 Likes

@renker.benjamin glad to know that you figured it out by your self well done

by the way there are cheat sheet here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

and have a nice day :slight_smile:

1 Like