General CSS class selector question

[DanielExMachina]

I am an amateur with CSS and am slowly learning as I customize my site.

One problem that I frequently run into is figuring out which class selector to use to modify different elements.

For example, I wanted to shift this UberMenu flyout to the right, but I didn’t know the class name for the flyout:

When I right-click Inspect in Chrome and hover over the flyout, a line highlights in DevTools, but it’s still not clear which class controls the flyout:

Eventually, after much trial and error, I discovered that I had to call these two classes:

And this code worked:

	.ubermenu .ubermenu-submenu-type-flyout {
		margin-left:  calc(1vw + 1.1rem);
}

My question is: is there a trick to finding out which classes to call to control specific objects? Or is it always just a guessing game?

[prakash_s]

Hello @one_eyed_man,

Thanks for writing to us.

No, it is not a guessing game you need to learn to style to determine which CSS class selector and style is rendering. You need to learn CSS and learn how to use the browser’s element inspector so you can understand which style is rending for which CSS class.

You may check this tutorial to learn CSS.

CSS Tutorial

Hope it helps
Thanks

[DanielExMachina]

Thanks for the resources @prakash_s, I’ll check those out.

[tristup]

Hi @one_eyed_man,

Glad that we are able to help you.

Thanks