如何在CSS中检查条件？

Question

I have a problem when using Master Slider.

It auto generates a lot of classes.

In my case, I load video and picture into the slide.

In the code I check with:

<?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 -->
?>

It will be generated structure like this:

            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

I want to add a button play into that with code:

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

You can see, I style only element ms-thumb-ol .

This element is same in another element.

Is there any method to check in div.ms-thumb picture_slider and div.ms-thumb-ol concurrent

Answer 1

If you want to edit the ms-thumb-ol only, you can use the css sibling combinator, since it is next to div.ms-thumb picture_slider . So, to modify it, add this selector for your css:

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

What the + combinator does is that it checks if the div.ms-thumb picture_slider class is followed by ms-thumb-ol . If it is, then apply styling.

Edit:

To make it simpler, change your code from what you have, to:

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

As long as your HTML is set up the way you showed in your question, it will work.

Notice the only difference is the sibling combinator + .

Answer 2

If you want to style only div.ms-thumb-ol that comes right after div.ms-thumb.picture_slider element inside div.ms-thumb-frame you can use CSS Adjacent sibling combinator like that:

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

Answer 3

If you have only two types of items...use ternary operator like this

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

And use $class in img tag as below..

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