css grand Kind des ersten Artikels Auswahl

https://jsfiddle.net/jg69c3yf/1/css grand Kind des ersten Artikels Auswahl

Ich bin ein CSS Noob. Ich möchte das div mit arrow-right auswählen, aber es sollte innerhalb der div-Klasse mit active als das erste Kind irgendwo in einem div sein.

In dieser Geige sollte nur 3 die Farbe grün haben.

HTML:

<div class="owl-stage"> 
<div class="owl-item"> 
1 
</div> 
<div class="owl-item"> 
2 
</div> 

<div class="owl-item active"> 
<div class="item"> 
<div class="arrow-right"> 
3 

</div> 
</div> 


</div> 
<div class="owl-item active"> 
<div class="item"> 
<div class="arrow-right"> 
4 
</div> 
</div> 

<div class="owl-item active"> 
<div class="item"> 
<div class="arrow-right"> 
5 

</div> 


</div> 

</div>

CSS:

.owl-stage .owl-item.active:first-child { 

background-color:red; 
color:blue; 

} 


.owl-stage .owl-item.active:first-child .arrow-right { 
background-color:red; 
color:Green; 

}

Quelle

2017-12-21 Abdul Rehman Sayed

Ein Problem ist, dass Sie scheinen </div> End-Tags in Ihrem HTML fehlen; Dies wird sichtbar, wenn Objekte richtig eingerückt werden.
Ich habe die </div> jetzt eingefügt, also solltest du schreien, wenn ich es falsch gemacht habe!

Wie auch immer, die Antwort ist, dass was Sie wollen, ist in CSS möglich, aber nur, wenn Sie einen kleinen Trick verwenden. Offensichtlich haben die Designer nie realisiert, dass dies notwendig ist. Der Trick besteht darin, zuerst "alle .owl-item.active divs" einzufärben und dann die Farben auf die Standardwerte für "alle .owl-item.active divs nach anderen .owl-item.active divs" zurückzusetzen.

.owl-stage .owl-item.active { 
 
    background-color: red; 
 
    color: blue; 
 
} 
 

 
.owl-stage .owl-item.active .arrow-right { 
 
    background-color: red; 
 
    color: Green; 
 
} 
 

 
.owl-stage .owl-item.active ~ .owl-item.active { 
 
    background-color: inherit; 
 
    color: inherit; 
 
} 
 

 
.owl-stage .owl-item.active ~ .owl-item.active .arrow-right { 
 
    background-color: inherit; 
 
    color: inherit; 
 
}

<div class="owl-stage"> 
 
    <div class="owl-item"> 
 
    1 
 
    </div> 
 
    <div class="owl-item"> 
 
    2 
 
    </div> 
 

 
    <div class="owl-item active"> 
 
    <div class="item"> 
 
     <div class="arrow-right"> 
 
     3 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="owl-item active"> 
 
    <div class="item"> 
 
     <div class="arrow-right"> 
 
     4 
 
     </div> 
 
    </div> 
 
    </div> <!-- added this end tag --> 
 
    
 
    <div class="owl-item active"> 
 
    <div class="item"> 
 
     <div class="arrow-right"> 
 
     5 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> <!-- and this one -->

Quelle

2017-12-21 08:32:57

Dieser ist besser als Temani's Antwort, weil es auf den Prinzipien auf Erben arbeitet, anstatt mich explizit Werte zu setzen. –

Ziemlich seltsam, dass: '.owl-stage> .active: nicht (: last-child) .arrow-right { Farbe: grün; } 'funktioniert aber' .owl-stage> .active: first-kind .arrow-right { Farbe: grün; } 'nicht. Obwohl es funktioniert, wenn du auch die aktive Klasse zu den ersten beiden anderen hinzufügst, sollte seltsamerweise ... gearbeitet haben. – VXp

@VXp Das liegt daran, dass in diesem speziellen Beispiel kein aktives Element vorhanden ist, das auch das erste Kind des übergeordneten Elements (.owl-stage) ist, während _IS_ ein aktives Element ist, das das letzte Kind von .owl-stage ist. –

Sie können so etwas wie dies versuchen:

.owl-stage .owl-item .arrow-right{ 
 
    background-color: red; 
 
    color: blue; 
 
} 
 

 
/* Here you have the Selector for the first active class*/ 
 
.owl-stage .owl-item.active .arrow-right{ 
 
    background-color: white; 
 
    color: Green; 
 
} 
 
/**/ 
 

 

 
/* You should put the stlye back as the first selector */ 
 
.owl-stage .owl-item.active+.owl-item .arrow-right{ 
 
    background-color: red; 
 
    color: blue; 
 
}

<div class="owl-stage"> 
 
    <div class="owl-item"> 
 
    1 
 
    </div> 
 
    <div class="owl-item"> 
 
    2 
 
    </div> 
 
    <div class="owl-item active"> 
 
    <div class="item"> 
 
     <div class="arrow-right"> 
 
     3 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="owl-item active"> 
 
    <div class="item"> 
 
     <div class="arrow-right"> 
 
     4 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="owl-item active"> 
 
    <div class="item"> 
 
     <div class="arrow-right"> 
 
     5 
 
     </div> 
 
    </div> 
 
    </div>

Quelle

2017-12-21 08:26:39

will ich halten, diese Klasse ‚Pfeil rechts‘ innerhalb des ersten aktiven Kindes bekommen. –

@AbdulRehmanSayed aktualisiert;) –

css grand Kind des ersten Artikels Auswahl

Antwort

Verwandte Themen