'Selector "on presence of"' thread on www-style 4-6 June 1998 -------------------------------------------------------------------------- Date: Thu, 04 Jun 1998 22:35:35 +0200 From: Simon Richter Subject: Selector "on presence of" Hi all... Would it make sense to have a selector that makes the rules apply only if a certain other element is present/not present? A possible use: ...stuff

Me My house My town

Him His house His town

Texttexttexttext This could be laid out as a letter, no problem (BTW: Is there a :first-page pseudo-class?), but if the sender wanted to add something like a company logo, the layout would need some corrections, which could be made in a special rule which would only apply if a IMG.logo was present. Now, what do you think about this? CU Simon -------------------------------------------------------------------------- From: Ian Hickson Date: Thu, 4 Jun 1998 23:25:00 +0100 Subject: Re: Selector "on presence of" > Would it make sense to have a selector that makes the rules apply only > if a certain other element is present/not present? > This could be laid out as a letter, no problem, but if the sender wanted > to add something like a company logo, the layout would need some > corrections, which could be made in a special rule which would only > apply if a IMG.logo was present. Why not just apply the rule to the IMG.logo element? (position it, etc). However, I do like the idea of a selector which applies to elements matching some condition based on other information gathered from the tree. What about this: A pseudo-class like the :lang() pseudo-class, which accepts as parameter a css selector. If the selector given as a paramter applies to anything, then the rule applies to the main selector. Eg: BODY.letter:conditional(BODY IMG.logo) { margin-top: 2em; } applies to BODY elements with class "letter" when there is an element IMG with class "logo" in the document tree. Other example: BODY H1 { font-size: 200%; } BODY H1:conditional(BODY H2) { font-size: 400%; } H1 is twice as big when there is an H2 in the document. This begs for another keyword - ':main-selector' or some such - which matches the element(s) matched by the main selector. BODY P:conditional(:main-selector + IMG) { text-align: center; } Centers paragraphs which appear before images. BODY FORM:conditional(:main-selector > INPUT[type=submit]) BUTTON.javascriptsubmit { display:none } Hides BUTTON elements of class "javascriptsubmit" when they are contained by a FORM element which contains as a direct child an INPUT element with the "type" attribute equal to "submit". Alternative names instead of :conditional() might be :condition() :present() :selector-present() >(BTW: Is there a >:first-page pseudo-class?) Yes. IIRC, @page :first {} -- Ian Hickson -------------------------------------------------------------------------- From: Daniel Glazman Subject: Re: Selector "on presence of" Date: Fri, 5 Jun 1998 09:33:22 +0100 (WET DST) > BODY.letter:conditional(BODY IMG.logo) { margin-top: 2em; } > > applies to BODY elements with class "letter" when there is an element IMG > with class "logo" in the document tree. If you take a look at actual CSS 2 selectors, you'll see that they are designed so the browser does not have to deal with the complete parse treee of the document. Implementors have already refused extensions of selectors because of this lack of a full parse tree and for 'performances' reasons. I clearly see the interest of such a proposal if a document is signed at the bottom of the document, i.e. if it contains something with a class or id saying the document is signed. In that case, you often want to inform the reader at the top of the document and then you know such a mechanism. My opinion : 1) lack of a parse tree : this is implementation problem and should not constrain the spec... 2) performances : even my Pilot is able to browse the web and the very first Sega or Nintendo is more powerful than my pc ! So : your proposal is interesting but you can be 100% sure that implementors will refuse it for implementation reasons. Last thing : pseudo-elements do not imply a condition on the target element in CSS2. Your proposal breaks that. PS: I'm sick and away from my office from 980605 to 980610 -------------------------------------------------------------------------- Date: Fri, 05 Jun 1998 10:22:03 -0400 From: Douglas Rand Subject: Re: Selector "on presence of" Ian Hickson wrote: > > > Would it make sense to have a selector that makes the rules apply only > > if a certain other element is present/not present? > > This could be laid out as a letter, no problem, but if the sender wanted > > to add something like a company logo, the layout would need some > > corrections, which could be made in a special rule which would only > > apply if a IMG.logo was present. > > Why not just apply the rule to the IMG.logo element? (position it, etc). > > However, I do like the idea of a selector which applies to elements matching > some condition based on other information gathered from the tree. > > What about this: A pseudo-class like the :lang() pseudo-class, which accepts > as parameter a css selector. If the selector given as a paramter applies to > anything, then the rule applies to the main selector. The problem is that all the current selectors and qualifiers, including things like :first-child, sibling and attribute values, are deterministic and fairly quick. If you search for a specific element in the document (in general) you need to do a full search of the entire document to satisfy each of these qualifiers. That makes it pretty impractical. The pattern language has to be a balance of functionality for the author as well as practicality for the implementor. You can get the effect you want in CSS1 with a class or id, and in CSS2 you can check for other attribute values. Doug -- Doug Rand drand@sgi.com Silicon Graphics/SSO http://reality.sgi.com/drand Disclaimer: These are my views, SGI's views are in 3D -------------------------------------------------------------------------- From: Ian Hickson Date: Fri, 5 Jun 1998 20:51:01 +0100 Subject: Re: Selector "on presence of" [I quote Daniel here, but Douglas said similar things of equal truth and my response takes his comments into account. First I discuss the points raised, then I propose a modification which would be easier to implement] A quick subset of my original suggestion is: >> BODY.letter:conditional(BODY IMG.logo) { margin-top: 2em; } >> applies to BODY elements with class "letter" when there is an element IMG >> with class "logo" in the document tree. Daniel Glazman wrote: > If you take a look at actual CSS 2 selectors, you'll see that they are > designed so the browser does not have to deal with the complete parse > treee of the document. Implementors have already refused extensions of > selectors because of this lack of a full parse tree and for > 'performances' reasons. I fully realise that this idea is dramatically more complicated to implement than anything so far present in CSS specs. As I said to Simon, in his case and in all cases I have so far met there are quicker ways of achieving the same effect. However, I am sure there are cases where (as far as the _stylesheet_ author is concerned) this would be much simpler/easier. Daniel's opinion: > 1) lack of a parse tree: this is implementation problem and should > not constrain the spec... > 2) performances: even my Pilot is able to browse the web and the very > first Sega or Nintendo is more powerful than my pc ! I agree, and will do so until the day that I decide to write my own renderer. > So: your proposal is interesting but you can be 100% sure that > implementors will refuse it for implementation reasons. Ah... I see the postprocessor implemented in your sendmail is still working... :-) Unfortunately, you are right. However, I think most things which are going to be in CSS3 are going to be hard to implement. Take, for example, Eric Sink's "complex page patterns" suggestion (which looked very interesting, BTW). > Last thing: pseudo-elements do not imply a condition on the target > element in CSS2. Your proposal breaks that. This is a pseudo-class. ("A:hover" is certainly a condition - it only applies to an A elements that have the pointer over it). An improvement over my idea is to drop the full parse tree search. Instead, the pseudo-class only checks descendants. (If you read the original idea, then basically you drop the ":main-selector" thing and infer it at the beginning of _all_ of the checked selectors). Examples to make it clearer, in order of clarity (clearest first): BODY.letter:contains(IMG.logo) { margin-top: 2em; } /* applies to BODY elements with class "letter" when it contains an element IMG with class "logo". */ BODY H1 { font-size: 200%; } BODY:contains(H2) H1 { font-size: 400%; } /* H1 is twice as big when there is an H2 in the document. */ BODY P:contains(IMG) { text-align: center; } /* Centers paragraphs that contain images. */ BODY FORM:contains(INPUT[type=submit]) BUTTON.javascriptsubmit display:none; } /* Hides BUTTON elements of class "javascriptsubmit" when they are contained by a FORM element which contains an INPUT element with the "type" attribute equal to "submit". */ BODY:contains(BLOCKQUOTE P IMG.signature):before { display: block; background: white; color: red; border: thin solid black; content: "This \ contains a signed document!" } /* Adds a bordered white box containg the text "This contains a signed document!" at the top of the canvas when the body element contains a blockquote containing a paragraph containing an image with class signature. */ /* And now a reason not to have this feature: */ P.message:after { content: " nowhere"; } DIV.special BLOCKQUOTE:contains(CITE A.author:focus) + P.status SPAN.link:after { content: " an author"; } /* assume the following document:

We now have to consider Darwin's book.

(That is a link to.)

Then it would normally render as: We now have to consider Darwin's book. (That is a link to nowhere.) But if Darwin's name has the focus, then the text should change to: We now have to consider Darwin's book. (That is a link to an author.) */ Now. About CSS not becoming a programming language... -- Ian Hickson --------------------------------------------------------------------------