SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Adjacent vs First Child Pseudo-Class Selector

    What is the difference between the Adjacent Selector and the First Child Pseudo-Class Selector??


    Debbie

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the same difference between sister and brother (Adjacent) and mother and daughter (First Child)

    or, the adjacent refers to one next to another, first child refers to first one inside another.

    or, like food: the soup and the meat balls with mashed potatoes are adjacent. that's untill you eat the soup, which makes the soup the first child inside your tummy but after a while they become adjacent again, since you will eventually eat the second course too. but the soup will remain the first child

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    the same difference between sister and brother (Adjacent) and mother and daughter (First Child)

    or, the adjacent refers to one next to another, first child refers to first one inside another.

    or, like food: the soup and the meat balls and mashed potatoes are adjacent. that's untill you eat the soup, which makes the soup the first child but after a while they become adjacent again, since you will eventually eat the second course too. but the soup will remain the first child
    Okay, I see the difference in my book now.

    As for the meatballs...


    Debbie

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what, meatballs are good... and adjacent

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As noonnope quite rightly says the adjacent selector selects adjacent siblings.

    e.g.This rule will select any paragraph that follows immediately after a previous paragraph.

    Code:
    p + p {background:red}
    Code:
    <p>Paragraph one  is not red</p>
    <p>Paragraph 2 is Red</p>
    <p>Paragraph 3 is Red also</p>
    <h2>Heading element interruption</h2>
    <p>paragraph is not red</p>
    The first-child pseudo class on the other hand selects an element that is itself a first-child as follows.

    Code:
    :first-child {background:red}
    Code:
    <p>Paragraph one  is red because it is the first-child of the body</p>
    <p>Paragraph two is not red <span>But this nested span is red is because it's a first-child of the p element</span></p>

    If you say div:first-child you select a div that is a first-child and not the first child of that div (unless it is also a div).

    Code:
    div:first-child {
        background:red
    }
    Code:
    <div>red</div>
    <div>Not Red</div>
    <div>
        <div>Red</div>
    </div>
    <div>
        <p>Not Red</p>
    </div>

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Nice analogy with the food nope

    Debbie, SitePoint has a very good CSS Reference that gives detailed explanations and examples. Have a look through these links.

    http://reference.sitepoint.com/css/a...iblingselector
    http://reference.sitepoint.com/css/p...ass-firstchild

    Here is an example I put together a while back that styles the anonymous divs on this page with both of those selectors.

    http://www.css-lab.com/lab-work/hide-text-AP.html

    View the page source and see what adjacent sibling and first-child selectors are capable of doing.


    Edit:

    Paul beat me to it with the Reference links

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow! I'm overwhelmed by everyone's responses and information!

    Thanks,


    Debbie

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh, oh, i got another one

    adjacent it's like the groom presenting the bride to his mother
    Code CSS:
    #groom + #bride {dress: white; pregnant: was;}
    and first child is like the bride presenting to her mother-in-law their first child
    Code CSS:
    #bride:first-child {cute: very; background: happiness;}
    she never knew anything about it! wow, the drama, the... soap!

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i got another one

    adjacent is what the right breast is for the left one (this month is about them, right!) and each are the first child for the cups of a bra.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •