css - Not leaving white space between class names

Question

I've inherited some CSS code in a large project (and I'm new to this) and it shows

.treeview li.submenu{ //details }

As you can see li.submenu are 'joined' to form a single string.

I separated them to .treeview li .submenu and the HTML didn't render as desired. However I am guessing that may be due to other code or that by adding the white space I've actually created valid CSS?

My understanding is, using the example above, the furthest left item is the parent, everything after is the child of that parent?

My question is, is the syntax correct to join by the period (.) or not? If yes, what does it mean/do? My own research doesn't show anything either way.

Answer 1

li.submenu means an li with a class name of submenu eg:

<li class="submenu">this li will be styled</li>

li .submenu means an li containing an element with a class of submenu

<li><a href="" class="submenu">this anchor will be styled</a></li>