CSSの条件をチェックするには？

Question

マスタースライダーを使用するときに問題があります。

これは、多くのクラスを自動的に生成します。

私の場合は、ビデオと画像をスライドに読み込みます。私がチェックコードで

：私はボタンのコードでそれにプレー追加したい

  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 

：

<?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 { 
    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だけをスタイルすることがわかります。

この要素は他の要素と同じです。

することで、アイテムの2種類のみを持っている場合はdiv.ms-thumb picture_sliderとdiv.ms-thumb-ol同時

Answer 1

を編集する場合は、 div.ms-thumb picture_sliderの横にあるので、css兄弟結合子を使用してください。だから、それを修正するために、あなたの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が続いているならば、それはチェックしていることです。そうであれば、スタイリングを適用してください。

編集：

が、それは簡単にするには、あなたが持っているものから、あなたのコードを変更するには：限り、あなたのHTMLは、あなたの質問に示したように設定されているよう

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

、それが動作します。

唯一の違いは、兄弟コンビネータ+です。

Answer 2

にチェックするための任意の方法は、この

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

のように三項演算子を使用して、以下のようimgタグで$classを使用して...あり..

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

Answer 3

あなたが右div.ms-thumb-frame内部div.ms-thumb.picture_slider要素の後にあなたがそのようなCSS Adjacent sibling combinatorを使用することができます来るだけdiv.ms-thumb-olのスタイルをしたい場合：

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