What Does a Space Mean in a CSS Selector? I.E. Difference Between .Classa.Classb and .Classa .Classb

when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

The first example (space-separated classes) is a parent-child relationship. .classB is found inside .classA.

<div class="classA">
    <div class="classB"></div>
</div>

The second is for one element with multiple classes, like so:

<div class="classA classB"></div>

Very different situations, but both extremely useful!

Further reading here:

css select an element with 2 class

http://css-tricks.com/multiple-class-id-selectors/

Opposite selector of :not(.classA, .classB, .classC) for a (X and (A or B or C)) selector

You can convert the selector classX && (classA || classB || classC) to (classX && classA) || (classX && classB) || (classX && classC)

Which is the following CSS selector:

.classX.classA, .classX.classB, .classX.classC {}

Then you can consider a small JS code to add the .classX in order to create the selector:

let dynamicClassList = ".classA, .classB, .classC";
let selector = dynamicClassList.replace(/,/gi, '.classX, ');selector=selector+'.classX';
$(selector).css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="classA classX">some text</div><div class="classB">some text</div><div class="classX classB">some text</div><div class="classX classB classA">some text</div><div class="classB classA">some text</div><div class="classX">some text</div>

What the difference between classes with space and no space in css, what the use of multiple classes with no space

.className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.

So you probably ask what's the difference between .classA .classB and .classA.classB selectors.

First selector will match any element with class classB that's placed within element with class classA, eg.:

<div class="classA">
  <p>
    Hello World!
    <span class="classB">this text will be matched by first selector</span>
    Lorem ipsum!
  </p>
</div>

Second selector will match any elements with both, classA and classB classes, eg.:

<p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
    <div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
    <div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

style issue in nested tags

.is-sticky .sub-menu {
     top:10px;
}

Need an explanation on responsive top menu (hamburger) from w3school example

ok, just answering your questions here:

Having no space between .topnav and .responsive means it will select an element with both class names. If you add the space in between, you would be selected all (if any) element having the responsive class name with a parent (or grandparent, or grand-grand-...-parent) having a topnav class name.
Basically, javascript:void(0); means "do nothing". The javascript: part means the following part is coded in javascript and the void(0) is a statement that does nothing and returns undefined, in javascript.
The line x.className += " responsive"; adds the responsive class name to the x element. If x had the class name topnav, after this line it will have both class names, matching the .topnav.responsive CSS selector.

Hope this helps you!

Get elements by class A or B in JavaScript

querySelector accepts pretty much any CSS selector:

var oneTwoThree = document.querySelectorAll('.one, .two, .three');