0

I'm trying to understand multiple class selectors in CSS:

That's my starting point:

<div class="content-wrapper layout-TILE">
   <div class="content draggable>           /* draggable is added/removed dynamically */
       <img class="some-image-class">
    </div>
</div>

<div class="content-wrapper layout-LIST">
   <div class="content draggable>           /* draggable is added/removed dynamically */
       <img class="some-image-class">
    </div>
</div>

img size usually depends just on .content-wrapper and .layout-XXX, for example:

.content-wrapper.layout-LIST .some-image-class {
  height: 20px;
  width: 150px;
}

.content-wrapper.layout-TILE .some-image-class {
  height: 50px;
  width: 50px;
}

But when .draggable is added to .content, how can I formulate a combined selector for two two-classes conditions like this:

.content-wrapper.layout-TILE AND .content.draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST AND .content.draggable .some-image-class {
  height: 5px;
  width: 5px;
}

Thanks in advance

Chris

cl10k
  • 653
  • 1
  • 5
  • 14

2 Answers2

1

Think you can use:

.content-wrapper.layout-TILE .draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST .draggable .some-image-class {
  height: 5px;
  width: 5px;
}

This way only when the .draggable classname is added will those styles be applied.

mikerojas
  • 2,057
  • 1
  • 3
  • 7
1
.content-wrapper.layout-TILE .content.draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST .content.draggable .some-image-class {
  height: 5px;
  width: 5px;
}

(don't forget the dot for the image class and watch the use of spaces)

or, even more specific (for direct descendant relations):

.content-wrapper.layout-TILE > .content.draggable > .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST > .content.draggable > .some-image-class {
  height: 5px;
  width: 5px;
}
Johannes
  • 59,058
  • 16
  • 59
  • 114