Wie bedingte Überprüfung in CSS?

Question

Ich habe ein Problem mit Master Slider.

Es generiert automatisch viele Klassen.

In meinem Fall lade ich Video und Bild in die Folie.

Im Code, den ich mit überprüfen:

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

Es wird Struktur wie folgt erzeugt werden:

  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 

ich eine Taste spielen in das mit Code hinzufügen möchten:

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

Sie können sehen, ich style nur Element ms-thumb-ol.

Dieses Element ist in einem anderen Element identisch.

Gibt es eine Methode, um einzuchecken div.ms-thumb picture_slider und div.ms-thumb-ol gleichzeitige

Answer 1

Wenn Sie die ms-thumb-ol nur bearbeiten möchten, können Sie Verwenden Sie den Css Geschwisterkombinator, da es neben div.ms-thumb picture_slider ist. Also, zu modifizieren, fügen Sie diesen Selektor für Ihre CSS:

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

Was die + combinator tut, ist, dass es überprüft, ob die div.ms-thumb picture_slider Klasse von ms-thumb-ol folgt. Wenn dies der Fall ist, wenden Sie Styling an.

Edit:

Um es einfacher zu machen, ändern Sie den Code aus dem, was Sie haben, zu:

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

Solange Ihre HTML ist die Art und Weise einrichten Sie in Ihrer Frage zeigten, es wird klappen.

Beachten Sie, der einzige Unterschied ist der Geschwisterkombinator +.

Answer 2

Wenn Sie nur zwei Arten von Gegenständen haben ... wie diese und $class wie unten in img Tag verwenden

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

ternären Operator ..

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

Answer 3

Wenn Sie nur div.ms-thumb-ol, das kommt direkt zum ursprünglichen Stil nach div.ms-thumb.picture_slider Element innerhalb div.ms-thumb-frame Sie CSS Adjacent sibling combinator so verwenden können:

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