CODEWITHSUNDEEP
cssformatting
Andrew Hardiman
Andrew Hardiman

Reputation: 969

:first-child selecting two elements

I am trying to format the text 'Portfolio' only, using the CSS below. However, this is also selecting the text 'Client' also. I do not understand why this is the case when I am selecting :first-child? Is it because I have a second class .group2, which then makes the text 'client' a first child? Although it is not the first-child of portfolio still. What is the logic here? 

<div class="portfolio">
    <div class="container">
        <h3>Portfolio</h3>
    <div class="group1">
        <img src="http....." style="height: 506px; width: 675px">
    <div class="group2">
        <h3>Client</h3>
        <h4>JPMorgan</h4>
        <h3>Role in Project</h3>
        <h4>Project Lead</h4>
        <h3>Project Included</h3>
        <h4>Mobile and Web Interface</h4>
        <a href="#">Browser</a>
    </div>
    </div>
    </div>
    </div>

<style>    

 .portfolio h3:first-child {
 color: #292929;
 border-bottom: 3.5px solid #E1E1E1;
 width: 130px;
 margin: 0px auto;
 font-size: 1.5em;
 text-transform: uppercase;
 text-shadow: 0px 0px 1px #292929;
 text-align: center;
 padding-bottom: 10px;
 font-family: inherit;
 }
</style>

Upvotes: 2

Views: 430

Answers (3)

thechrishaddad
thechrishaddad

Reputation: 6735

Try this:

.container > h3 {
 color: #292929;
 border-bottom: 3.5px solid #E1E1E1;
 width: 130px;
 margin: 0px auto;
 font-size: 1.5em;
 text-transform: uppercase;
 text-shadow: 0px 0px 1px #292929;
 text-align: center;
 padding-bottom: 10px;
 font-family: inherit;
 }

Upvotes: 1

Bj&#248;rn
Bj&#248;rn

Reputation: 101

Hei!

Yes, "The :first-child CSS pseudo-class represents any element that is the first child element of its parent." In this case h3 with "Client" is a first child of a parent. The parent is .group2.

Upvotes: 1

bytecode77
bytecode77

Reputation: 14840

Your problem is the selector:

.portfolio h3:first-child

This selects any h3 that is the first child of h3's parent. Note that this parent doesn't need to be a .portfolio!

.portfolio > div > h3:first-child

With this notation, you explicitly define the path of the DOM you want to have. The h3 has to be within a <div>, which has to be within .portfolio.

Upvotes: 1

Related Questions