Несколько двухклассных css -селекторов?

Question

Я пытаюсь понять несколько селекторов классов в CSS:

Это моя отправная точка:

<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 размер обычно зависит только от .content-wrapper и .layout-XXX, например:

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

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

Но когда к 1013 * добавляется .draggable, как я могу сформулировать комбинированный селектор для двух условий двух классов, как это:

.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;
}

Заранее спасибо

Крис

Answer 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;
}

(не забывайте точку для класса изображения и следите за использованием пробелов)

или, еще более конкретно, c (для прямых отношений потомков) :

.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;
}

Answer 2

Думаю, что вы можете использовать:

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

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

Этот способ будет применяться только при добавлении имени класса .draggable.