CSS :first-child pseudo-element

Question

Why is my code not working as intended? background-color of the first article must be green. How I can do it without classes or id? PS I'm sorry but my post needs more text. I'm sorry but my post needs more text.

    <!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
        <title>stack</title>

        <link rel="stylesheet" href="css/style_new.css">
    </head>

    <body> 
        <section>
            <h1>This is H1 header</h1>

            <article>
                <p>
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit 

                </p>
            </article>

            <article>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

                </p>
            </article>

            <article>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

                </p>
            </article>
        </section>
    </body> 
</html>

CSS code:

     section article:first-child {
    background-color: green;
}

    section article:last-child {
        background-color: red;
    }

Answer 1

Actually first child of section tag is h1 not article. So use below code instead,

section article:first-of-type {
  background-color: green;
}

Answer 2

article is not the first-child of section - its h1

the first/last child selector does only target if article is the first or last child of its container.

possible css:

section article{
  background-color:green;
}
section article + article{
  background-color:transparent;
}
section article:last-child {
  background-color: red;
}

see http://jsfiddle.net/rn4wgho2/

Answer 3

 ![enter image description here][1]

h1 required to remove the plug out of the section

This is H1 header

        <article>
            <p>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit 

            </p>
        </article>

        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

            </p>
        </article>

        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

            </p>
        </article>
    </section>

CSS :first-child pseudo-element

Question

3 answers

solution1
1 ACCPTED 2015-03-17 06:58:06

solution2
0 2015-03-17 06:59:42

solution3
0 2015-03-17 07:05:41

This is H1 header

CSS :first-child pseudo-element

Question

3 answers

solution1 1 ACCPTED 2015-03-17 06:58:06

solution2 0 2015-03-17 06:59:42

solution3 0 2015-03-17 07:05:41

This is H1 header

solution1
1 ACCPTED 2015-03-17 06:58:06

solution2
0 2015-03-17 06:59:42

solution3
0 2015-03-17 07:05:41