Re: [css-d] Adjacent Sibling Selectors in Reverse?
But that affects p tags that fall AFTER h2's, not before, no?
--
On 8/30/10 at 12:37 PM +0100, MEM wrote in a message entitled
Re: [css-d] Adjacent Sibling Selectors in Reverse?:
2010/8/30 Rick Gordon li...@rickgordon.com
Is there some way to address the first member of an adjacent sibling
selector, as opposed to the last member?
For example, if I wanted to address p tags immediately preceding an h2, how
might I go about it? Thanks.
Something like this perhaps?
h2+p {
}
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
--
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
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] Adjacent Sibling Selectors in Reverse?
Something like this perhaps?
h2+p {
}
But that affects p tags that fall AFTER h2's, not before, no?
Yes, that's correct. I don't think there's a way to do this without Javascript.
What about styling the h2 instead of the p? I don't know what your use case
is, but if, for example, you wanted extra bottom margin on the last paragraph
in the section, you could put extra top-margin on the h2 instead.
Perhaps something like:
h2 {margin-top: 2em}
h2:first-of-type {margin-top: 1em} /* makes the margin smaller for the first h2
on the page */
---Tim
__
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] Adjacent Sibling Selectors in Reverse?
Yes, Tim, I understand that, and in fact, I am currently addressing the h2.
The reason why I was trying to do it the other way is because the context is
for EPUB formatting, and space above the h2 causes it to fall lower on the page
if the h2 is at the top of a page. By addressing the p prior to the h2, I could
adjust the margin-bottom of that, rather than the margin-top of the h2.
Rick Gordon
--
On 8/30/10 at 7:03 PM +, Climis, Tim wrote in a message entitled
Re: [css-d] Adjacent Sibling Selectors in Reverse?:
Something like this perhaps?
h2+p {
}
But that affects p tags that fall AFTER h2's, not before, no?
Yes, that's correct. I don't think there's a way to do this without
Javascript.
What about styling the h2 instead of the p? I don't know what your use case
is, but if, for example, you wanted extra bottom margin on the last paragraph
in the section, you could put extra top-margin on the h2 instead.
Perhaps something like:
h2 {margin-top: 2em}
h2:first-of-type {margin-top: 1em} /* makes the margin smaller for the first
h2 on the page */
---Tim
--
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
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] Adjacent Sibling Selectors in Reverse?
Adjacent sibling in reverse is not possible but you could adapt direct siblings
using something like this:
h2 p {
color: yellow;
}
hth
--- On Mon, 30/8/10, Rick Gordon li...@rickgordon.com wrote:
Is there some way to address the
first member of an adjacent sibling selector, as opposed to
the last member?
For example, if I wanted to address p tags immediately
preceding an h2, how might I go about it? Thanks.
--
__
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] Adjacent Sibling Selectors in Reverse?
On Mon, Aug 30, 2010 at 1:16 PM, Rick Gordon li...@rickgordon.com wrote: Yes, Tim, I understand that, and in fact, I am currently addressing the h2. The reason why I was trying to do it the other way is because the context is for EPUB formatting, and space above the h2 causes it to fall lower on the page if the h2 is at the top of a page. By addressing the p prior to the h2, I could adjust the margin-bottom of that, rather than the margin-top of the h2. Rick Gordon What giving the selector h2:first-of-type a smaller top margin than other h2 elements? Beth __ 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] Adjacent Sibling Selectors in Reverse?
If I understand your question correctly, something like the stuff below
might work for you. I used the following HTML, based on your example:
p1st paragraph/p
p2nd paragraph/p
h2Some heading/h2
p3rd paragraph/p
p4th paragraph/p
p5th paragraph/p
and this CSS:
p { color: green; }
h2 + p, p + p { color: red; }
The first p before the h2 gets green text. All others are red. Which
selectors are needed to style the elements after the h2 depends on your
HTML.
This is not very nice - but it works. The basic idea is to use a generic
selector for the special case and then override it with more specific
selectors for the other elements.
The first rule targets all p elements. The second rule overrides this for
a) p elements that directly follow a h2 element (3rd p) and
b) for all p elements that have another p element as an adjacent
sibling (2nd, 4th and 5th p).
According to the current draft for CSS3 selectors there may be a
:nth-of-type selector which might be just the thing you're after. More
on the new selectors can be found here:
http://www.w3.org/TR/css3-selectors/#selectors
hope this helps,
Joergen
Am 30.08.10 13:12, schrieb Rick Gordon:
Is there some way to address the first member of an adjacent sibling
selector, as opposed to the last member?
For example, if I wanted to address p tags immediately preceding an
h2, how might I go about it? Thanks.
__
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] Adjacent Sibling Selectors in Reverse?
Thanks all.
I finally decided to wrap the major groupings in a div class=by-country
wrapper, and set margin-bottom for the .by-country class.
Rick Gordon
--
On 8/30/10 at 10:25 PM +0200, Joergen W. Lang wrote in a message entitled
Re: [css-d] Adjacent Sibling Selectors in Reverse?:
If I understand your question correctly, something like the stuff below might
work for you. I used the following HTML, based on your example:
p1st paragraph/p
p2nd paragraph/p
h2Some heading/h2
p3rd paragraph/p
p4th paragraph/p
p5th paragraph/p
and this CSS:
p { color: green; }
h2 + p, p + p { color: red; }
The first p before the h2 gets green text. All others are red. Which selectors
are needed to style the elements after the h2 depends on your HTML.
This is not very nice - but it works. The basic idea is to use a generic
selector for the special case and then override it with more specific
selectors for the other elements.
The first rule targets all p elements. The second rule overrides this for
a) p elements that directly follow a h2 element (3rd p) and
b) for all p elements that have another p element as an adjacent
sibling (2nd, 4th and 5th p).
According to the current draft for CSS3 selectors there may be a :nth-of-type
selector which might be just the thing you're after. More on the new selectors
can be found here:
http://www.w3.org/TR/css3-selectors/#selectors
hope this helps,
Joergen
--
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
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/
