最初の要素

コード最初の要素

<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"と表示されます。残念ながら、これは動作しません。

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

出典

2016-12-29 Stiller Eugen

あなたは、ブートストラップCSSを追加しましたか？ –

ええ、フレームワークの一部.. –

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

出典

2016-12-29 09:08:20

ありがとう、完璧に働いた！ –

あなたのために働いていれば、その答えをチェックしてください。 –

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

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

ここではjsfiddleです。

出典

2016-12-29 09:16:23 Gehtnet

私はそれがきちんと整っていないことを知っています。簡単なアプローチ – Gehtnet

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

出典

2016-12-29 09:19:07

答えて

関連する問題