CODEWITHSUNDEEP
csscss-selectorsmultiple-conditions
cl10k
cl10k

Reputation: 951

Multiple two-classes css-selector?

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

Upvotes: 0

Views: 178

Answers (2)

Johannes
Johannes

Reputation: 67778

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

Upvotes: 1

mikerojas
mikerojas

Reputation: 2338

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.

Upvotes: 1

Related Questions