Does>: Does the first child work regardless of whether this type is known or unknown?

Question

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

I think I need to apply the effect to the first child of the <h1> , but I could not get it to work. So instead, I'm trying to use 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 script, you will notice that the title has a blue background and the content has a gray background. All I'm trying to do is insert a line of white:

Current:

Desired (note the white between blue and gray)

Please note: I know that this is pretty trivial if I just add a new div with a class or even add a border-bottom:solid 5px white; tag border-bottom:solid 5px white; in the <h1> , I want to learn about CSS selectors, so is this possible with CSS selectors?

Answer 1

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

You can either make parent > :first-child to match any first child, regardless of node type, or it can make parent > p:first-child to match only the first child if it has a p tag.

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

Answer 2

To complete the example you are trying to use pseudo-elements:

• You can use :nth-child(1) to select the first child of type :first-child . Note: In this example, this is pointless since you will only have one <h1> per <article> .

• section article h1 is given position: relative , and position: absolute children will be positioned relative to it.

• :after is set to position: absolute and width: 100% to create a line at the bottom of the background <h1> .

Remember that :after and :before pseudo elements :after equivalent:

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

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

Answer 3

In your example, you are trying to select the second child element of h1 , but this element has no children, and therefore it fails. You must select the second child of the parent element h1

 section article :nth-child(2):before 

This has the advantage that you don’t put any tag name there, so it will work even if one day you change h1 to h2 , for example. This last selector can also be rewritten to

 section article :first-child:after 

This is not the same , but you can also add the generated content after the element (and in your case it will work fine and work the same way).

Or, if you want to match something with h1 , you need to target your next brother using the sibling selector

 section article h1 + *:before 

This selector will select the first element (regardless of its type), which will appear immediately after h1 .

Or by inserting generated content after an element, you can use this

 section article h1:after { background-color: white !important; content: ''; height: 10px; display: block; } 

Which, in my opinion, is the easiest way to do