[css-d] 'Reverse' adjacent sibling selector?
Hello, Is there a way in CSS to match a first element which is the PREVIOUS sibling to the second element? Example: I want to target the paragraph before every header. h2Header/h2 pFirst paragraph/p pLast paragraph/p !-- I want to style this paragraph -- h2Another header/h2 After quite a bit of Google-ing it doesn't seem possible but I don't understand why. Is this a scenario that I should solve in a more intelligent way than I have been able to think of so far? Cheers, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'Reverse' adjacent sibling selector?
Hi, Daniel,
the best I can come up with is to target the last child in the following markup.
div.section p:last-child {}
div class=section
h2Header/h2
pFirst paragraph/p
pLast paragraph/p
/div
div class=section
h2Another header/h2
/div
I suggest you to have a look on browser compatibility tables:
http://www.quirksmode.org/css/contents.html#t35
The last-child selector is not supported until IE 9. Therefore I would
simply use the following:
p.last-child {}
h2Header/h2
pFirst paragraph/p
p class=last-childLast paragraph/p
--
{U}() Čimo
Michal Čizmazia
On Fri, Oct 1, 2010 at 11:29, Daniel Baars i...@danielbaars.nl wrote:
Hello,
Is there a way in CSS to match a first element which is the PREVIOUS
sibling to the second element?
Example: I want to target the paragraph before every header.
h2Header/h2
pFirst paragraph/p
pLast paragraph/p !-- I want to style this paragraph --
h2Another header/h2
After quite a bit of Google-ing it doesn't seem possible but I don't
understand why. Is this a scenario that I should solve in a more
intelligent way than I have been able to think of so far?
Cheers,
Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'Reverse' adjacent sibling selector?
CSS does not navigate in reverse. You would need xpath, JavaScript, or modified HTML structure for what you have described. On Oct 1, 2010, at 5:29 AM, Daniel Baars i...@danielbaars.nl wrote: Hello, Is there a way in CSS to match a first element which is the PREVIOUS sibling to the second element? Example: I want to target the paragraph before every header. h2Header/h2 pFirst paragraph/p pLast paragraph/p !-- I want to style this paragraph -- h2Another header/h2 After quite a bit of Google-ing it doesn't seem possible but I don't understand why. Is this a scenario that I should solve in a more intelligent way than I have been able to think of so far? Cheers, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'Reverse' adjacent sibling selector?
why not add a class to the p tag? and style with css? On Fri, Oct 1, 2010 at 1:08 PM, Ryan nun...@gmail.com wrote: CSS does not navigate in reverse. You would need xpath, JavaScript, or modified HTML structure for what you have described. On Oct 1, 2010, at 5:29 AM, Daniel Baars i...@danielbaars.nl wrote: Hello, Is there a way in CSS to match a first element which is the PREVIOUS sibling to the second element? Example: I want to target the paragraph before every header. h2Header/h2 pFirst paragraph/p pLast paragraph/p !-- I want to style this paragraph -- h2Another header/h2 After quite a bit of Google-ing it doesn't seem possible but I don't understand why. Is this a scenario that I should solve in a more intelligent way than I have been able to think of so far? Cheers, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'Reverse' adjacent sibling selector?
+1 Tim: Have a look here: http://archivist.incutio.com/viewlist/css-discuss/112698 Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with overflow:hidden and absolute hover elements
Hi David, Am Monday 27 September 2010 21:20:31 schrieb David Hucklesby: I'm guessing that the AP help is partly outside the DIV that has overflow: hidden; on it? I'm also guessing you are using overflow in order to contain floats. With these bold assumptions, I suggest using something other than overflow: hidden; to contain floats, as anything inside, positioned outside, will have the overflow--umm--hidden. These properties also establish a new block-formatting context just as overflow: hidden; does. It depends on your layout as to which is best: overflow: auto float (left or right) position: absolute display: inline-block display: table-cell Hope this helps. Thank you very much! It was the YAML subcolumns container with attribute overflow:hidden. Changing that to display:inline-block makes it run. Manfred __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
