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

Question

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

У меня проблема при использовании Master Slider.

Это автоматически генерирует много классов.

В моем случае я загружаю видео и изображение в слайд.

В коде я проверяю с:

<?php if($item->type == 1): ?>   <!-- is Video -->
<img class="ms-thumb video_slider" ... />
?>
<?php if($item->type == 2): ?>   <!-- is Picture -->
<img class="ms-thumb picture_slider" ... />
<div class="picturediv"></div> <!-- I tried to add manual element like that to assign instead of using: `ms-thumb-ol` but it auto remove when slide is generate -->
?>

Будет сгенерирована такая структура:

            div.ms-thumb-frame
div.ms-thumb video_slider
div.ms-thumb-ol

div.ms-thumb-frame
div.ms-thumb picture_slider
div.ms-thumb-ol

Я хочу добавить кнопку воспроизведения в это с кодом:

div.ms-thumb-frame {
position: relative;
}
div.ms-thumb-frame div.ms-thumb-ol {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
}
div.ms-thumb-frame div.ms-thumb-ol:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}

Вы можете видеть, я стиль только элемент ms-thumb-ol,

Этот элемент такой же в другом элементе.

Есть ли способ проверить div.ms-thumb picture_slider а также div.ms-thumb-ol параллельный

0

css javascript jquery masterslider php

Решение

Другие решения

Если вы хотите только стиль div.ms-thumb-ol который приходит сразу после div.ms-thumb.picture_slider элемент внутри div.ms-thumb-frame ты можешь использовать CSS смежный братский комбинатор как это:

div.ms-thumb-frame div.ms-thumb.picture_slider + div.ms-thumb-ol {
/* ... */
}

1

Если у вас есть только два типа предметов … используйте троичный оператор, как это

$class= ($item->type == 1)?'ms-thumb video_slider':'ms-thumb picture_slider';

И использовать $class в img пометить как показано ниже ..

<img class="<?php echo $class;?>" ... />

0

Источник

Accepted Answer

Если вы хотите редактировать ms-thumb-ol только, вы можете использовать комбинатор братьев и сестер CSS, так как он находится рядом с div.ms-thumb picture_slider, Итак, чтобы изменить его, добавьте этот селектор для вашего CSS:

div.ms-thumb picture_slider + ms-thumb-ol{
//Whatever code you want that specific button to have but not the other button
}

Что за + комбинатор делает то, что он проверяет, является ли div.ms-thumb picture_slider класс сопровождается ms-thumb-ol, Если это так, тогда примените стиль.

Редактировать:

Чтобы упростить его, измените код с того, что у вас есть, на:

div.ms-thumb-frame + div.ms-thumb-ol {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
}div.ms-thumb-frame + div.ms-thumb-ol:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play-    button-crm-homepage-11.png);
}

Пока ваш HTML настроен так, как вы указали в своем вопросе, он будет работать.

Обратите внимание, единственное отличие — это брат и сестра комбинатор +,

1