The first div element inside a div

Question

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

I would like to approach the first element of "mgu-w-tdw-box" inside the line "mgu-w-tdw-brow". Unfortunately this does not work.

thanks for the help.

Answer 1

this is what you need, first select div:first-childand style inside the 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>  

Run codeHide result

Answer 2

I would prefer a more readable version that does the same for this example.

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

Here is the jsfiddle for it.

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>  

Run codeHide result