What is with this css selector?

Question

I'm having a custom styled checkboxes with image insead of the dom element. It's using this selector. What this selector do? +em is bugging me big time :)

input[type='checkbox']:checked+em::before

Please help.

Answer 1

The + is an adjacent sibling combinator. So that selector selects the em element immediately following a checked checkbox. This is as distinct from the general sibling combinator, ~, which would match any following sibling of the input even if not right next to it.

Answer 2

Creates a pseudo-element thats is the first child of the em tag before an input element with the attribute type checkbox that is checked.