Tuesday, 15 January 2013

css selectors - CSS Nth Child For Use In Quoting Messages -



css selectors - CSS Nth Child For Use In Quoting Messages -

i creating message scheme in users can quote messages of other users. works fine 1 quote when have multiple quotes able visually distinguish between them.

i using "nth child" selector seek , give each 2nd quote block different visual style ie row.

i have next html construction post containing 4 quotes within ie 1 quote quoting another.

<div class='post_container'> <blockquote><cite>quote: user1</cite> <blockquote><cite>quote: user2</cite> <blockquote><cite>quote: user3</cite> <blockquote><cite>quote: user4</cite> <p>post1</p> </blockquote> <p>post2</p> </blockquote> <p>post3</p> </blockquote> <p>post4</p> </blockquote> </div>

the css code using follows:

.post_container blockquote{ padding:10px; margin:10px; background-color:#000000; } .post_container blockquote *:nth-child(even){ border:thick; background-color:#3ff; } .post_container blockquote>cite{ font-weight:bold; font-size:16px; background-color:#999999; } .post_container blockquote *>div:nth-child(2){ background-color:#3ff; }

here how looks in html currently: http://jsfiddle.net/5jjxj/6/

use .post_container blockquote:nth-child(even) *

instead of .post_container blockquote *:nth-child(even){

css css-selectors

No comments:

Post a Comment