最初の要素

Question

コード

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

行 "mgu-w-tdw-brow"と表示されます。残念ながら、これは動作しません。

ありがとうございました。

Answer 1

これは私がこの例のために同じことをよりよく読めるバージョンを好むの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

内div:first-childとスタイルを選択するには、最初、何が必要です。

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

ここではjsfiddleです。

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>