erste Element div innerhalb div

Question

-Code

<div class="row mgu-w-tdw-brow"> 
<div class="col-xs-6 col-sm-6 col-md-3"> 
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div> 
</div> 
<div class="col-xs-6 col-sm-6 col-md-3"> 
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div> 
</div> 
<div class="col-xs-6 col-sm-6 col-md-3"> 
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div> 
</div> 
<div class="col-xs-6 col-sm-6 col-md-3"> 
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div> 
</div> 

CSS

.mgu-w-tdw-brow div.mgu-w-tdw-box:first-child { border: 2px solid green; } 

Ich möchte das erste Element der "MGU-w-tdw-box" innerhalb der Ansatz Zeile "mgu-w-tdw-brow". Leider funktioniert das nicht.

danke für Hilfe.

Answer 1

das ist, was Sie brauchen, zuerst div:first-child wählen und Artinnere div

.mgu-w-tdw-brow div:first-child .mgu-w-tdw-box { 
 
    border:2px solid green; 
 
}

<div class="row mgu-w-tdw-brow"> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div> 
 
</div> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div> 
 
</div> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div> 
 
</div> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div> 
 
</div> 
 
    
 
</div>

Answer 2

Ich würde eine bessere lesbare Version bevorzugen, die das gleiche für dieses Beispiel der Fall ist.

.mgu-w-tdw-brow >:first-child { 
border: 2px solid green; 
} 

Hier ist ein jsfiddle dafür.

Answer 3

.mgu-w-tdw-brow [class*="col"]:nth-child(1) .mgu-w-tdw-box{ 
 
border:solid 2px #000; 
 
}

<div class="row mgu-w-tdw-brow"> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div> 
 
</div> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div> 
 
</div> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div> 
 
</div> 
 
    
 
<div class="col-xs-6 col-sm-6 col-md-3"> 
 
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div> 
 
</div> 
 
    
 
</div>