Wed, 2005-08-17 02:59
if nothing else, i at least discovered one thing over the past 2 days of reading Eric Meyer's book-- i'm moving a lot more slowly than i expected! It's mostly because i'm taking notes as i go along, which amounts to a lot of re-reading. if i don't do it that way, and ensure that i've assimilated one concept before i move on to the next, i'm just not happy and i feel like i might be missing something. call it OCD, whatever.
anyway... as i was trying some code like the following:
h1 + p {margin-top: 0;}
p ol {color: red;}
li > li {color: blue;}
the adjacent sibling selector. the way i understand it, it affects. for example, a second and third adjacent sibling, but not the first? i'm a bit confused on that-- not to mention, EditPlus's seamless browser, IE, doesn't support child and adjacent sibling selectors! so, i didn't get a real look at everything until i set it to use Firefox externally.
any recommendations for a resource to get a better grasp on the whole descendant selectors bit? the basic concept is easy to understand, but in practice, for me it was a bit tricky to pull off.
course, this is coming from a guy who hasn't hand-coded in years, so i've already got a few scrapes on my knuckles just from that end of it.
Wed, 2005-08-17 08:01
#1
selecting children and adjacent siblings
the adjacent sibling selector says that both elements have the same parent element and the second element is the one acted on if it is adjacent or directly following it's sibling in the flow order, so:
p + p {text-indent:1em;} means that the paragraph directly following the first is indented if they both share the same parent and will indent all following siblings until a new parent begins when the first sibling in the parent container would be un-indented again starting the sequence afresh.
Breaking the sibling nature of the paragraphs would also start the rule set afresh:
<div id="parent">
<p>this line would not be indented</p>
<p>This line will be indented</p>
<p>this line also is indented</p>
<h4>heading</h4>
<p>this line will have no indent as it is no longer an adjacent sibling</p>
<p>But this line is once again a sibling and shares the same parent so will be indented</p>
</div>
The best guide to follow is are the CSS specs really and the best way of understanding the uses is to play with them (testcase them) as The explanations are not always clear cut
http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors
Hugo.
Wed, 2005-08-17 13:08
#2
selecting children and adjacent siblings
cool. your definition is what i was trying to say.
it's quite possible that i have errors in my code. it is not doing what i expect it to do. for example, the first paragraph under the <h1> is blue, not the second. the same goes for the second <h1>. it's second and thrid <p>'s are default, black, and the first is blue.
please take a look at my code:
<HTML>
<HEAD>
<TITLE>Cascading Stylesheets: Chapter 2.5.4</TITLE>
<style type="text/css">
body {font: small Arial;}
h1 + p {color: blue;}
p + ol {color: red;}
ol + li {color: green;}
ul + li {color: purple;}
</style>
</HEAD>
<BODY>
<h1>Heading One</h1>
<p>Paragraph. This paragraph has one adjacent sibling.</p>
<p>Hello. I'm am an adjacent to the paragraph above</p>
<h1>I am a new H one</h1>
<p>I am a paragraph, and i have adjacent siblings</p>
<p>I am an adjacent sibling to the paragraph above.</p>
<p>I am another paragraph. adjacent sibling to my brother and sister above
<ol>
<li>i'm the first list item. i have one adjacent sibling</li>
<li>The second list item,
and also an adjacent sibling</li>
<ul>
<li>i am a list item in an ul, child of the parent ol, i have a sibling</li>
<li>i am a sibling to the li's above and below me</li>
<li>the last sibling in the unordered list</li>
</ul></ol>
<ol>
<li>The first ordered list item in an ol which has a sibling itself</li>
<li>I am the second list item, and the second adjacent sibling</li>
<li>I am the third adjacent sibling, the the final in this list</li></ol>
I am lonley text, still part of the paragraph above the lists</p>
<p>i am the second adjacent sibling beneath the second heading</p>
</BODY>
</HTML>
Wed, 2005-08-17 13:22
#3
selecting children and adjacent siblings
I'm starting to love this smiley 
Wed, 2005-08-17 13:28
#4
selecting children and adjacent siblings
it's doing as you ask:
Your saying that the paragraph that is a sibling of h1 should be blue the following paragraphs are not adjacent siblings of H1, therefore will be default black.
Maybe you need to just use p+p or you might try:
h1 + p + p {color:blue;}
That should be a paragraph that is an adjacent sibling of a paragraph that is an adjacent sibling of an h1 should be blue but this I think would mean that the third paragraph after the h1 would revert to black.
It's a slightly confusing selector, best thing is to play around with combinations.
Hugo.
Wed, 2005-08-17 13:58
#5
selecting children and adjacent siblings
TPH what on earth do you mean, why are you assuming this thread has anything to do with DocTypes. It's a question about using selectors. Just because the poster has not included the doctype in his testcase does not mean it's relevant to the question. The selector will be obeyed regardless of whether there is a DTD in modern browsers.
Yeah I know you like that smiley but please use it when it's appropriate.
Hugo.
Wed, 2005-08-17 14:00
#6
selecting children and adjacent siblings
While IE doesn't support child selectors you can get around it by using
descendant selectors.
instead of this:
li {color: red;}
li > li {color: blue;}
do this
li {color: red;}
li li {color: blue;}
li * li {color: red;}
Wed, 2005-08-17 14:09
#7
selecting children and adjacent siblings
So whats the difference between li > li and li li?
Wed, 2005-08-17 14:55
#8
selecting children and adjacent siblings
You can't use the child selection combinator in IE, and the attempt of firstreflex is to workaround that fact.
Eric Meyer has posted it not long ago:
http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/
Wed, 2005-08-17 15:14
#9
selecting children and adjacent siblings
I think that were missing the point here. jsabarese is working his way through certain aspects of CSS in a theoretical fashion to understand these selectors, he has not implied that he is attempting to use them in a real world sense, so although it's helpful to point out the workaround to the child selector for IE it's not quite the issue, but interesting nonetheless.
Hugo.
Wed, 2005-08-17 18:37
#10
selecting children and adjacent siblings
To answer TPH's question, since its been asked 
thepineapplehead wrote:
So whats the difference between li > li and li li?
li li - is descendent, could be child, could be grandchild, could be great grandchild, etc.
li > li - is child only (and an illegal html combination
).
a more succinct fix, is
li li {color: blue;}
li, li * li {color: red;}does * count in the specificity stakes? if it does, order doesn't matter, if it doesn't the li * li line must come after li li.
To restate the point on adjacent siblings.
p + p will only affect the second and subsequent paragraphs in a contiguous set of paragraphs.
when you use different elements in the combination, (e.g. h1 + p) the style rule only affects the second element in the combination when its immediately preceded by the first.
I find it easier to think of the + selector as "is preceded by". From the name adjacent sibling I initially expected it to mean both elements were to be affected by the style. In normal language, adjacent doesn't imply a direction. If I am adjacent to you, you are adjacent to me.
:first-child also confused me for a while. I expected selector:first-child to affect selector *:first-child {} (if that makes sense).
Wed, 2005-08-17 19:49
#11
selecting children and adjacent siblings
No the universal element carries no specificity.
I guess the meaning of adjacent in this sense is that the siblings are adjacent to their parent, that is both having equal distance/position/status in regard of their parent.
So p + p = apply these rules to the p that is a sibling of the p that precedes it and which both share the same adjacency to a parent container.
As I said earlier slap a h# tag in between and the sibling rivalry is broken.
It is confusing I originally did not see that the rules would be applied to subsequent P's as it is not immediately apparent until you think it through.
Hugo.
Wed, 2005-08-17 23:41
#12
selecting children and adjacent siblings
sorry to chime in so late in the conversation here.
d*mn nine to five... i tell ya.
wow! this is definitely better than any paid tutorials at VTC!
:twisted:
thanks to all of you for your attention to my confusion. i have to say, it's weird hearing myself addressed as jsabarese. you can call me js, (or jeff) if you remember. anyway...
okay. hugo, you're saying that the first <p> is an adjacent sibling to the first <h1>. how is that so?
perhaps it would be best if i "talk it out", so you can better pick up on where i've got it twisted. let me grab my notes...
according to Meyer, Eric. Cascading Style Sheets: the Definitive Guide, 2nd Edition, O'Reily: March 2004., in section 2.5.4 Selecting Adjacent Sibling Elements
Quote:
and in that same section, different paragraph he goes on to say"To select an element that immediately follows another element with the same parent, you use the adjacent-sibling combinator, represented as a plus symbol (+). "
Quote:
Remember that you can select the second of two adjacent siblings only with a single combinator. Thus, if you write li + li {font-weight: bold;}, only the second and third items in each list will be boldfaced.
So, in reference to my own html code block above-- the one w/out the doctype, the way i'm hearing Meyer and applying it to my code, is as follows: "any paragraph which is a sibling of a preceding <p>, and shares the same <h1> parent of that preceding paragraph, shall be
colored blue".
when i loaded my page into firefox, the first paragraph after the <h1> is blue. so, the reason i think this is wrong is because Meyer states that "you can select the second of two adjacent siblings only with a single combinator".
can you help me to understand then why my first paragraph, child of <h1> and adjacent sibling to the paragraph following, is colored blue-- and how that is the same as what Meyer is saying?
as i was looking for the appropriate piece to show you, I thought i saw where i was mixed up when i read the very first line that i quoted here ("to select an element that immediately follows another element"), but then i read on where he says "remember..." (also quoted above), and i just get totally confused.
Hugo, what you're saying sounds like Meyer in the first quote. why does he go on to say that second part?
EDIT:
going back to this w/ a fresh head, i think i get it now. the adjacent sibling combinator is essentially capable of producing two unique style effects. for me, it is important to read it right to left, as Meyer suggests.
Thu, 2005-08-18 02:40
#13
selecting children and adjacent siblings
** make your screen wide to read this post comfortably **
Your confusion is why I much prefer "is preceded by".
<h1> is not a parent of a <p>. Parent/Child refers to elements nested within other elements.
<div id='contents'> apply not apply <h1>heading</h1> - div h1, div > h1 div + h1 <p>para text</p> - div p, div > p, h1 + p </div>
In this example <h1> and <p> are siblings. They are both children of the div#contents (which is css format for a div with an id of 'contents')
<div id='menu'> apply apply
<h2>menu</h2> - div h2, div > h2
<ul> - div ul, div > ul, h2 + ul
<li><a href='#'>menu item</a></li> - div li, ul li, ul > li div a, ul a, li a, li > a
<li><a href='#'>menu item</a></li> - div li, ul li, ul > li, li + li div a, ul a, li a, li > a
</ul>
</div>
In this example, the <li> are children of the <ul> and descendants of both <ul> and <div>. <h2> and <ul> are siblings. The two <li> are siblings. The <a> are each children of a different <li>. In this example there are only two elements which are adjacent siblings, the <ul> (adjacent to <h2>) and the second <li> (adjacent to the first <li>).
So why does "p + p" match the second and subsequent paragraphs?
Consider...
<div id='content'> apply not apply <h1>heading</h1> <p id='p1'>para text</p> - h1 + p p + p <p id='p2'>para text</p> - p + p h1 + p <p id='p3'>para text</p> - p + p h1 + p <p id='p4'>para text</p> - p + p h1 + p </div>
The four <p>s and <h1> are all siblings. p#p1 is an adjacent sibling to h1. But, it isn't adjacent to any other p
So, a style of p + p will only apply to p#p2, p#p3 & p#p4.
Which comes back to my original contention, the style selector, a + b, applies a style to b when it is immediately preceded by (the closing tag of) a. Remember that and you will be fine
Thu, 2005-08-18 07:24
#14
selecting children and adjacent siblings
Jeff I was about to reply to your last post but see that Chris has snuck in there first and has pretty much covered things.
it is important to read selectors right to left, the last selector is the one receiving the rules conditional on the ones that precede it.
The only important thing to remember with the adjacent sibling selector is that it states that an element Is followed by or Is preceded by in this sense this is the adjacency of the name as they must be contiguous, Siblings as they must be both children of the same parent, therefore siblings to each other.
Essentially the + combinator is intended to act on a pair of selectors
h1 + p; p takes the rules only if it directly follows the h1 and is not nested within another element a second instance of p will not receive rules as it is no longer preceded by the h1 element
Take two elements the same such as p + p and things change slightly as now were saying that rules apply to a P that follows a P . so the first P will take no rules as it is not preceded by anything the second will though, then in some senses the selectors loop themselves as a block of P's (contiguous) will all take the rules until the loop is broken by another element breaking the flow of contiguous P's.
In a block of P's only the first is unaffected by the rules as it is the one that is conditional on the actions being implemented, all the subsequent P's do indeed fulfill the requirements of following after, it is only the first P that does not follow after.
As I think Chris said earlier the term Adjacent Sibling is perhaps not the clearest description. It is better to just think in terms of a element that is Preceded by another or applying rules only to an element that Immediately Follows another .
Hugo.
Thu, 2005-08-18 12:33
#15
selecting children and adjacent siblings
Thanks much to you both, and to the authors of the other replies above. You really made a huge effort to help me understand. It says a lot about the character of the users in this forum, and your dedication to CSS.
I makes me wish i had more time to devote to learning-- it's exciting to think about what lies ahead.