What is the difference between the Adjacent Selector and the First Child Pseudo-Class Selector??
Debbie
What is the difference between the Adjacent Selector and the First Child Pseudo-Class Selector??
Debbie
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.
oh, oh, i got another one
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!
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
Wow! I’m overwhelmed by everyone’s responses and information! (:
Thanks,
Debbie
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.
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.
Paul beat me to it with the Reference links
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 {
background:red
}
<div>red</div>
<div>Not Red</div>
<div>
<div>Red</div>
</div>
<div>
<p>Not Red</p>
</div>
what, meatballs are good… and adjacent
Okay, I see the difference in my book now.
As for the meatballs…
Debbie