Adjacent vs First Child Pseudo-Class Selector

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


i got another one :wink:

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.

oh, oh, i got another one :slight_smile:

adjacent it’s like the groom presenting the bride to his mother

#groom + #bride {dress: white; pregnant: was;}

and first child is like the bride presenting to her mother-in-law their first child

#bride:first-child {cute: very; background: happiness;}

she never knew anything about it! wow, the drama, the… soap! :lol:

the same difference between sister and brother (Adjacent) and mother and daughter (First Child) :slight_smile:

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 :slight_smile: 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 :wink:

Wow! I’m overwhelmed by everyone’s responses and information! (:



Nice analogy with the food nope :slight_smile:

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

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

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


Paul beat me to it with the Reference links :slight_smile:

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.

p + p {background:red}

<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.

:first-child {background:red}

<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).

div:first-child {

<div>Not Red</div>
    <p>Not Red</p>

what, meatballs are good… :lol: and adjacent

Okay, I see the difference in my book now.

As for the meatballs… :shifty: