Pseudo-Classes nth-child

+2 Amod Nazirkar · December 5, 2014
Hi Bucky !!!
First of all would like to Thank you with all my Heart !!! You are Amazing Man and your Tutorials are a lot Helpful !!!

I am making a self help HTML and CSS File Referring to your Tutorials and while doing so something struck me !!!
My Question here is related to the nth-child in css,

please have a look at my Code Below :

[HTML]

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML 5-CSS3</title>
    <link rel="stylesheet" href="css3-stylesheet.css">
</head>

<body>
       <section>
           <article>
     <!--class parent Starts styled the Third child over here-->
        <div class="parent">
            <div class="son">This is the First Child</div>
            <div class="son">This is the Second Child</div>
            <div class="son">This is the Third Child</div>
            <div class="son">This is the Fourth Child</div>
            <div class="son">This is the Fifth Child</div>
            <div class="son">This is the Sixth Child</div>
        </div>
     <!--class parent Ends-->

     <!--class daddy starts-->
        <div class="daddy">
            <div class="daughter">This is the First daughter</div>
            <div class="daughter">This is the Second daughter</div>
            <div class="daughter">This is the Third daughter</div>
            <div class="daughter">This is the Fourth daughter</div>
            <div class="daughter">This is the Fifth daughter</div>
            <div class="daughter">This is the Sixth daughter</div>
        </div>
    <!--class daddy Ends-->
           </article>
      </section>
</body>
</html>

[css]

/*Using Pseudo-Classes*/
div:nth-child(3){color:green;}
div:nth-child(odd){color:blue;}
div:nth-child(even){color:red;}

well now what is happening is as i give the (odd) and (even) Values in the css the nth-child is styling both of my div's with the class of "Daughter" as well as "son"
what I wanna do is keep all the child divs with the class "son" unaffected, and only style the "daughter" class div childs with the (odd) and (even) values.

I tried taking both divs (".parent")(".daddy") inside separate sections and Articles too... but it didn't Helped, maybe the nth-child property applies universally to all the childs.

is there any way i can go about styling both divs Differently using nth-child ???
please Help !!!

Post a Reply

Replies

Oldest  Newest  Rating
0 Phillip Drake · December 6, 2014
Hello Amod!  Try the following CSS.  I hope this helps......

div:nth-child(3){color:green;}
div.daughter:nth-child(odd){color:blue;}
div.daughter:nth-child(even){color:red;}
0 Amod Nazirkar · December 6, 2014
Hey Phillip !!! It worked Thank you so Much !!!!! Your Reply was very Valuable !! I got to Learn something New, Thank you so Much for your Quick Response I Really Appreciate it !!!
0 Phillip Drake · December 7, 2014
Glad the code worked for you!  Anytime you need help just give a shout out.
0 Amod Nazirkar · December 8, 2014
Sure Phillip Have a Nice Day Bro !!! :D \\HAPPY CODING//
0 olawumi olusegun · December 8, 2014
Hi  my name is Segun i'm a lover of  free video training . please i have been having challenges with a project i'm working on using php and mysql. I am actually working on a school database having table for all school courses, course_code, course_units, course_title student_registration form student bio-contact datas and so on . But my problem (1). i want a student to be able to query courses from the database using a textarea webform separating each course_code with comma and upon clicking the search button the query for each of the values from the textarea will be diaplayed in a textbox there after the stduent will be able to submit the query to his or her student_registration table and again i also want to validate two things .First if the total sum of the course_code been queried from the database is greater than 12 it should be diplay an error and also if it's less than 6 , it should also display an error. Thanks hope to hearing from you soon my email address is olawumi.olusegun@gmail.com
  • 1

HTML / CSS / Web Design

103,564 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators