Not using Adjoining Classes Breaks Style?

Question

I only occasionally have to mess with CSS, so I'm no guru, and I'm trying to wrap my head around adjoining classes (a.k.a. chained classes)...

When I'm in the Chrome inspector and do a 'copy selector', it gives me a selector with adjoining classes; but then CSS Lint gives me a warning not to use adjoining classes.

When I use this code, my style works as desired:

li.operation.post div.content,
li.operation.get div.content,
li.operation.put div.content,
li.operation.delete div.content,
li.operation.patch div.content { border-color: #4C566A; background-color: #2E3440; }

But when I split the selectors up, like the following, the style breaks:

li .operation .post   div .content,
li .operation .get    div .content,
li .operation .put    div .content,
li .operation .delete div .content,
li .operation .patch  div .content { border-color: #4C566A; background-color: #2E3440; }

I'm aware that I can ignore the warnings, since they're just warnings, but I'm interested in knowing why it breaks.

`li.operation {}` means li tags with class `operation`, but `li .operation {}` means all descendants of li tags that have `operation` class, probably this is the difference that you have — Calvin Nunes, Aug 27 '19 at 20:38
Spaces have meaning in CSS selectors. `li.operation` is not equal to `li .operation` — j08691, Aug 27 '19 at 20:40

score 4 · Answer 1 · answered Aug 27 '19 at 20:40

Because both are different types of selectors. The selectors are case and space sensitive.

li.operation.post div.content will select

<li class="operation post">
  <div class="content">

while li .operation .post div .content will select

<li class="post">
  <div class="operation">
    <div class="post">
      <div>
        <div class="content">

When you apply those changes, the style breaks because the browser is not able to process the unavailable element in the DOM.

score 1 · Accepted Answer · answered Aug 27 '19 at 20:40

When styles are joined like:

li.operation.post div.content

Then your html looks like:

<ul>
  <li class="operation post">
     <div class="content">
       //something
     </div>
  </li>
</ul>

So the classes are wrapped together in one tag basically.

When it's:

li .operation .post div .content

your html looks like:

<ul>
  <li>
    <div class="operation>
      <div class="post">
         <div>
           <div class="content">
             // something
           </div>
         </div>
      </div>
    </div>
  </li>
</ul>

So it's more hierarchical and cascading into a final element.

Not using Adjoining Classes Breaks Style?

2 Answers2