15 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 41 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 41 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

selecting children and adjacent siblings

I'm starting to love this smiley Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 15 years 49 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

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;}

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

selecting children and adjacent siblings

So whats the difference between li > li and li li?

Verschwindende wrote:
  • CSS doesn't make pies

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 13 years 48 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

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/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

selecting children and adjacent siblings

To answer TPH's question, since its been asked Wink

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

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 41 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

selecting children and adjacent siblings

sorry to chime in so late in the conversation here. Wink
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:
"To select an element that immediately follows another element with the same parent, you use the adjacent-sibling combinator, represented as a plus symbol (+). "
and in that same section, different paragraph he goes on to say
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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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 Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 41 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

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.