When you point an element in your tooltips, UserGuiding stores css selectors querying the element you've selected. Later you preview that step, our algorithm use those selectors to figure out where the element is located.
Custom CSS Selector is a way for you to overwrite selectors found by UserGuiding. When you activate and enter your preferred custom css selector, UserGuiding's selectors won't be used on that step anymore.
When to use it?
1-) You're getting 'previewed element hidden' error even if you reselect the element
2-) You want some steps to be optional, you want to skip those steps in certain cases. (examples below)