что означает пробел в селекторе css? т.е. в чем разница между .classa.classb и .classa .classb?

<p>в чем разница между этими двумя селекторами?</p><pre><code>.classa.classb { border: 1px solid; } .classa .classb { border: 1px solid; } </code></pre>

<p><code>.classa.classb</code> относится к элементу, который имеет оба класса a и b (<code>class="classa classb"</code>); тогда как <code>.classa .classb</code> относится к элементу с <code>class="classb"</code>, произошедшему от элемента с <code>class="classa"</code>.</p><p>правка: спецификация для справки: <a href="http://www.w3.org/tr/css2/selector.html#attribute-selectors">селекторы атрибутов</a> (см. раздел 5.8.3 селекторы классов)</p>

<p>подобный стиль встречается гораздо чаще и предназначен для любого типа элемента класса "classb", который вложен в любой тип элемента класса "classa".</p><pre><code>.classa .classb { border: 1px solid; } </code></pre><p>это будет работать, например, на:</p><pre><code><div class="classa"> <p class="classb">asdf</p> </div> </code></pre><p>этот, однако, нацелен на любой тип элемента, который относится как к классу "classa", так и к классу "classb". этот тип стиля встречается реже, но в некоторых обстоятельствах все же полезен.</p><pre><code>.classa.classb { border: 1px solid; } </code></pre><p>это относится к этому примеру:</p><pre><code><p class="classa classb">asdf</p> </code></pre><p>однако это не повлияет на следующее:</p><pre><code><p class="classa">fail</p> <p class="classb">fail</p> </code></pre><p>(обратите внимание, что когда элемент html имеет несколько классов, они разделяются пробелами.)</p>

<p>это официально известно как "потомок комбинатор".</p><p>читайте об этом в <a href="https://developer.mozilla.org/en-us/docs/web/css/descendant\_combinator">mdn</a> или в <a href="https://www.w3.org/tr/selectors-3/#descendant-combinators">спецификации css</a> </p>