<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Automatic Selector Prepending: Switch</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" rel="stylesheet" title="Default Stylesheet" href="global.css" />
</head>
<body id="auto_prepending" class="documentation">
<div id="header">
</div>
<div id="localNav">
<h2>Switch</h2>
<ul id="extensionsNav">
<li><a href="install_mac.html">Installation (Mac)</a></li>
<li><a href="install_windows.html">Installation (Windows)</a></li>
<li><a href="variables.html">Variables</a></li>
<li><a href="constants.html">Constants</a></li>
<li><a href="includes.html">Includes</a></li>
<li><a href="comments.html">Comments</a></li>
<li><a href="ignore.html">Ignore</a>
<li><a href="auto_prepending.html">Automatic Selector Prepending</a></li>
<li><a href="inheritance.html">Inheritance</a></li>
<li><a href="copy.html">Property Duplication</a></li>
<li><a href="property_lookup.html">Property Look-ups</a></li>
</ul>
</div>
<div id="mainContent">
<h2>Automatic Selector Prepending</h2>
<p>SSS allows authors to nest style rules; child style rules will prepend the selectors of their parent rule to their own selectors. This allows authors to quickly build specificity without repetition. </p>
<p>A SSS parser will output all the properties of a style rule, then output any nested style rules prepending it's selectors with the selectors of the nested style rule.</p>
<div class="example">
<pre class="input"><code>ul {
border: 1px solid #fff;
li {
display: block;
border: 1px solid #ccc;
a {
display: block;
background-color: #f00;
padding: 5px;
color: #fff;
}
a:hover {
background-color: #fff;
color: #f00;
}
}
background-color: #00f;
}</code></pre>
<pre class="input"><code>ul {
border: 1px solid #fff;
background-color: #00f;
}
ul li {
display: block;
border: 1px solid #ccc;
}
ul li a {
display: block;
background-color: #f00;
padding: 5px;
color: #fff;
}
ul li a:hover {
background-color: #fff;
color: #f00;
}
</code></pre>
</div>
<p>One case where auto-prepending can be useful is in cases where body elements are each given a unique id. Authors can easliy "scope" a group style rules without redundancy and worrying rules will effect another page...</p>
<div class="example">
<pre class="input"><code>#page_1 {
a {
color: red;
}
@comment "...a bunch of other rules that only apply to #page_1...";
}
#page_2 {
a {
color: blue;
}
@comment "...a bunch of other rules that only apply to #page_2...";
}</code></pre>
<pre class="output"><code>#page_1 a {
color: red;
/* ...a bunch of other rules that only apply to #page_1... */
}
#page_2 a {
color: blue;
/* ...a bunch of other rules that only apply to #page_2... */
}
</code></pre>
</div>
</div>
</body>
</html>
