Does > :first-child work whether the type is known or unknown?

Question

I have read Is there a CSS selector for the first direct child only? and http://www.w3schools.com/cssref/css_selectors.asp

I guess I have to apply the effect to the first-child of the <h1> tag, but I couldn't get it to work. So instead, I'm trying to use the nth-child, but still no luck.

JSFiddle

<section>
<article>
    <h1>Test Details</h1>
        <ul>
            <li>Layer This</li>
            <li>Layer That</li>
            <li>Layers</li>
        </ul>
</article>
</section>

<section>
    <article>
        <h1>Campaign details</h1>
        <p>Text</p>
    </article>
</section>

CSS

section {
    padding:30px;
}

section article {
    background:#EBEBEB;
}

section article h1 {
    background:#0C79CB;
    padding:10px;
}

/* This is where I am struggling */
section article h1:nth-child(2):before  {
    background-color:white !important;
    content:'';
    height:10px;
    display:block;
}

If you open the fiddle, you'll note that the header has a blue background, and the content has a grey background. All I'm trying to do is to 'insert' a line of white:

Current:

Desired (note white between the blue and grey)

Please note, I know this is quite trivial if I just add a new div with a class, or even add a border-bottom:solid 5px white; to the <h1> tag, the point is I'm trying to learn about CSS selectors so is this possible using CSS Selectors?

Answer 1

:first-child can be used with or without knowing the element type.

You can either do parent > :first-child to match any first child, whatever node type it is, or you can do parent > p:first-child to only match the first child if it's a p tag.

You can also do parent > p:first-of-type to match the first p inside parent, even if it isn't the first child.

Answer 2

To complete the example you are attempting using pseudo elements:

• It is possible to use :nth-child(1) to select the first child like :first-child. Note: In this example it is pointless, as you will only have one <h1> per <article>.

• section article h1 is given position: relative and it's position: absolute children will be positioned in relation to it.

• The :after is given position: absolute and width: 100% in order to create a line at the bottom of your <h1> background.

Remember that the :after and :before pseudo elements are the equivalent of:

<h1>
    <span>This is the :before</span>
        I am the heading
    <span>This is the :after</span>
</h1>

Have an example

CSS

section article h1 {
    background:#0C79CB;
    padding:10px 10px 20px;
    position: relative;
}
/* 
 -- Select the first h1 child of article and generate a pseudo element.
*/
 section article h1:nth-child(1):after {
    background-color:white;
    content:'';
    height:10px;
    width: 100%;
    display:block;
    position: absolute;
    bottom: 0;
    left: 0;
}