user3877230 user3877230 - 2 months ago 4
CSS Question

nth-child is not recognized

The Code

.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}


is not recognized and i do not know why. I took a look with Firebug and the second child is not even listed. I simply want to set the background to the image provided in the Link you see above.

Here is the complete sourcecode.

CSS

.inner{
background-color: #000;
height: 100%;
padding: 35px;
text-align: justify;
width: 100%;
color: #fff;
}

.inner-video, .inner-image{
padding: 0px;
}

.inner-image{
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
}

.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

.row > [class*='col-'] {
display: flex;
flex-direction: column;
}


HTML

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="inner">
This is a Test!
</div>
</div>

<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>

<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
</div>

<div class="row">
<div class="col-md-6">
<div class="inner inner-video">
<iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe>
</div>
</div>

<div class="col-md-6">
<div class="inner">
This is a Test!
</div>
</div>
</div>
</div>
</body>
</html>

Answer

The reason it is not working is because there are no siblings of .inner-image; it is contained in its own div. A solution could be:

 <div class="image-container col-md-4">
        <div class="inner inner-image">
        </div>
 </div>

 <div class="image-container col-md-4">
       <div class="inner inner-image">
       </div>
 </div>

CSS:

.image-container:nth-child(2) .inner-image{...}
Comments