CODEWITHSUNDEEP
csscss-selectors
Turan
Turan

Reputation: 142

css nth-child not working (nth-of-type neither)

I want to set al the even titles from h2 in orange. I need to use nth-child. I can't figure out what i did wrong... 

    *{
        font-size: 1em;  
    }
    h2{
       font-size: 1.5em
    }
    h2:first-letter{font-size: 150%}
    h2:nth-child(odd){
       color:#ef3909;
    }

The last line in css has the nth-child which does not work properly. Thanks in advance

Upvotes: 1

Views: 715

Answers (2)

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

using `nth-child() is little bit confusing for new

here is the code for css

.main article:nth-child(2n) h2{
    color: orange;
}

see demo

Upvotes: 1

emmanuel
emmanuel

Reputation: 9615

You have to set nth-child(even) to <h2> elements.

.main article:nth-child(even) h2 {
  color: orange;
}
<div class="main">
            <article>
               <a id="welkom"><h2>Welkom</h2></a>
               <p>
                  Dakwerken Jellen is al jaren de <strong>specialist in dakwerken</strong>. 
               </p>
            </article>
            
            <article>
               <a id="platteDaken"><h2>Platte daken</h2></a>
         
            </article>
            <article>
               <a id="gevelbekleding"><h2>Gevelbekleding</h2></a>
               <p>
                  Naast dakbedekking staan wij ook in voor de bekleding van gevels. U
               </p>
            </article>
            <article>
               <a id="zinkwerken"><h2>Zinkwerken</h2></a>
               <p>
                  Zink is reeds vele jaren een van de betere materialen om de regen via dakgoten te laten afvoeren. 
               </p>
            </article>
            <article>
               <a id="referenties"><h2>Referenties</h2></a>
               <p>
                 Een aantal referenties ...
               </p>
            </article>
         </div>
      </div>

Upvotes: 2

Related Questions