Modifying themes with css overview

Hi there,

I’m a bit confused about modifying themes with css.

I use Chrome developer tools to identify elements I want to style.

For example, I might identify that I want to style an element with the following id/classes:

ul#menu-left-sidebar-menu-1.menu-widget

A couple of things:

1)I can’t find an option in chrome developer tools to copy this “selector” (if that’s what it is). Is there such a feature?

2)Which part of this should I target? the id or the class, or both/all? The actual “matched css” rules in the developer tools are given as

#widgets ul{..}

and what about when an element has multiple classes such as this:

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-28

?!! The mind boggles! I had to type all that by hand because there’s I can’t find a copy option, so I’m guessing that using the full list of classes like that is not a common task?

Can anyone identify what the gap is in my understanding here and help me to fill it?

Regards,

Robin.