Applying CSS3 to pseudo-class first-child - css

Question

I have markup that goes something like this
<div class='wrap'>
<div class='container'>
Body Container content
</div>
<div class='container'>
Footer Container content
</div>
</div>
I want to display a header containing, amongst other things, a logo above the first, body, container. This I accomplished by defining
.container::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
The above works. The problem is that the logo ends up not onlyu above the body content but also above the footer content which is not quite the desired result. I have played around with various combinations of
.container::before:nth-of-child(1)
{
}
.container:nth-of-child(1)::before
{
}
but I haven't quite found the right syntax to target the ::before pseudo element for the first .container instance. I hope that someone here will be able to tell me how it should be done.
If the worst comes to the worst I can do it with a spot of jQuery but I would like to avoid that.

Answer 1

Would you consider using <main> W3 4.4.14 The main element and <footer> 4.4.9 The footer element per HTML5 elements with class of .container on each? That way you can reference/target those elements without psuedo elements
main::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
This way the header/logo you are looking for would only appear above the first container only. Then if you need to apply pseudo elements to <footer> you could do something like:
footer::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}

Answer 2

OK so I'll add another answer because it doesn't appear that anyone has solved all of your issues.
First, there is a typo in your css: background-image(url(path/to/image.jpg) is missing the closing paren.
To do what you want, however, there is a simple css selector :). In your example, you try nth-to-child(), but the correct syntax for what you want is nth-child(). Look below for two options, with a working demo.
.container:first-child:before
{
display: block;
content: "Before Element";
/* other styling that you choose*/
}
/* the following selector will also work
.container:nth-child(1):before
{
display: block;
content: "Before Element";
}
*/
<div class='wrap'>
<div class='container'>
Body Container content
</div>
<div class='container'>
Footer Container content
</div>
</div>
Note that the display: block; part is so that the before content appears on it's own line, since :before elements by default are display: inline-block;.

Answer 3

I dont think that there is a way to making it work with nth-of-child, but it will definitely work with first-child (if you always need it only in the first element with class .container):
.container:first-child:before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}

Answer 4

My first thought here is that there should be an additional class for the header, or use the <header> and <footer> elements in place of divs. For example:
<div class="wrap">
<div class="container header">
Header
</div>
<div class="container footer">
Footer
</div>
</div>
and
.header::before {
// stuff to make your logo
}
However, if for some reason you can't change the html, then the :first-child selector should work for your needs, as others have answered.

Answer 5

If you want to use nth-child() you need to add it to the parent of the element that you want to select. In this case .wrap.
.wrap:nth-child(1):before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}