On 21.6.2013 2:05, Angela French wrote:
Let's say you have N-number of paragraphs in an article, and you want the last
paragraph to have some different attributes as the other<p>, such as a greater
margin-bottom.
Is there a way to describe that in css?
Thank you!
John
You mean like this:
p:last-child
{
background:#ff0000;
}
That rule would affect every p element that is the last child of its
parent, e.g. in <div><p>foo</div> but not <div><p>foo<hr></div>.
Assuming, for definiteness, that the article is marked up as <article
id=x>...</article> and that you wish to set the bottom margin of the
last paragraph (i.e., the last p element among its childern but not
necessarily the last element there), the code would be
#x > p:last-of-type { margin-bottom: 0 }
(Using just a space instead of ">" would make the selector match also
the p element in <article id=x><div><p>foo</div>... possibly some p
elements here</article>.)
Browser support is good but does not cover IE 8 and older; for them,
some polyfills are available. See
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
http://selectivizr.com
Yucca
______________________________________________________________________
css-discuss [[email protected]]
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/
