Как я могу сопоставить несколько селекторов CSS

Question

Как я могу сравниться только в том случае, если у div playTitleDurationContainer есть классный кинематограф и класс качества?

Благодаря С.

<div id="playTitleDurationContainer" class="playTitleDurationContainer cinema-large"> 
    <div id="qualityMarker" class="qualityMarker"> 
     <img class="no-border" alt="" src="img.png" width="47" height="30"> 
    </div> 
    <div id="videoTitle" class="videoTitle">Test 1</div> 
    <div id="playingTime" class="playingTime">06:11</div> 
</div> 

Пример: Если playTitleDurationContainer имеет элемент я хочу изменить CSS для videoTitle и для PlayingTime одного одновременно.

Answer 1

Вы можете попробовать:

div.playTitleDurationContainer.cinema-large > div.qualityMarker{ 

} 

Answer 2

Как я могу соответствовать только если ДИВ playTitleDurationContainer имеет класс кино-большой?

Это легко. Поскольку каждый id должен быть уникальным, вы могли бы просто использовать

#playTitleDurationContainer.cinema-large { ... } 

и DIV qualityMarker?

Это невозможно, так как subject selector не предлагается и не рекомендуется. Обходным путем является получение #qualityMarker с JavaScript и добавление класса к его родительскому элементу. В этом случае вы можете снова объединить классы:

#playTitleDurationContainer.cinema-large.hasQualityDiv { ... } 

Answer 3

Вы можете попробовать:

div.playTitleDurationContainer.cinema-large > div.qualityMarker ~ .videoTitle,div.playTitleDurationContainer.cinema-large > div.qualityMarker ~ .playingTime { 
    /* styling here*/  
}