<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Andrey Shchekin &#187; CSS</title>
	<atom:link href="http://blog.ashmind.com/index.php/category/web/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.ashmind.com</link>
	<description></description>
	<lastBuildDate>Mon, 15 Mar 2010 18:00:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>CSS container class trick</title>
		<link>http://blog.ashmind.com/2007/10/08/css-container-class-trick/</link>
		<comments>http://blog.ashmind.com/2007/10/08/css-container-class-trick/#comments</comments>
		<pubDate>Mon, 08 Oct 2007 17:48:21 +0000</pubDate>
		<dc:creator>Andrey Shchekin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Solutions]]></category>

		<guid isPermaLink="false">http://blog.ashmind.com/index.php/2007/10/08/css-container-class-trick/</guid>
		<description><![CDATA[.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, "Courier New", Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: Consolas, "Courier New", Courier, Monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
</style>
<p>Recently I had a debugging session with one of my colleagues and I remebered a simple trick I use often.<br /> Imagine that you have a list of items, and you want to simultaneously change them in response to a user action.</p>
<p>For example, what if you have this list:</p>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">ul</span> <span class="attr">class</span><span class="kwrd">="Contacts"</span><span class="kwrd">&gt;</span>
  <span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>Andrey <span class="kwrd">&lt;</span><span class="html">span</span><span class="kwrd">&gt;</span>Shchekin<span class="kwrd">&lt;</span><span class="html">span</span><span class="kwrd">&gt;&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
  <span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>Nina <span class="kwrd">&lt;</span><span class="html">span</span><span class="kwrd">&gt;</span>Philippova<span class="kwrd">&lt;</span><span class="html">span</span><span class="kwrd">&gt;&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
  <span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>Gordon <span class="kwrd">&lt;</span><span class="html">span</span><span class="kwrd">&gt;</span>Freeman<span class="kwrd">&lt;</span><span class="html">span</span><span class="kwrd">&gt;&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">ul</span><span class="kwrd">&gt;</span></pre>
</p>
<p>And you want to show/hide (expand/collapse) all spans in javascript.</p>
<p>One way to do this would be to go through all spans and change their className.<br />
But that can be quite slow on large list.</p>
<p>The better way is to use something like addClassName (from prototype.js) on <code class="csharpcode"><span class="kwrd">&lt;</span><span class="html">ul</span><span class="kwrd">&gt;</span></code>.</p>
<p>So you change it to <code class="csharpcode"><span class="kwrd">&lt;</span><span class="html">ul</span> <span class="attr">class</span><span class="kwrd">="Contacts AllCollapsed"</span><span class="kwrd">&gt;</span></code> and then apply styles to <code class="csharpcode">.AllCollapsed li span</code>.</p>
<p>This way the browser is responsible for finding all contained elements, which should be faster.<br />
Also, if elements are added dynamically, you do not have to process them.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.ashmind.com/2007/10/08/css-container-class-trick/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
