Skip to content

Instantly share code, notes, and snippets.

@alice-liu
Created September 19, 2014 18:57
Show Gist options
  • Save alice-liu/bd49490642934f683de5 to your computer and use it in GitHub Desktop.
Save alice-liu/bd49490642934f683de5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="hello-example">
<a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
<a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zhCN">世界您好!</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好!</span>
</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
/* All spans with a "lang" attribute are bold */
span[lang] {font-weight:bold;}
/* All spans in Portuguese are green */
span[lang="pt"] {color:green;}
/* All spans in US English are blue */
span[lang~="en-us"] {color: blue;}
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}
/* All internal links have a gold background */
a[href^="#"] {background-color:gold}
/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {color: red;}
/* All links to with "example" in the url have a grey background */
a[href*="example"] {background-color: #CCCCCC;}
/* All spans with a "lang" attribute are bold */
span[lang] {
font-weight: bold;
}
/* All spans in Portuguese are green */
span[lang="pt"] {
color: green;
}
/* All spans in US English are blue */
span[lang~="en-us"] {
color: blue;
}
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {
color: red;
}
/* All internal links have a gold background */
a[href^="#"] {
background-color: gold;
}
/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {
color: red;
}
/* All links to with "example" in the url have a grey background */
a[href*="example"] {
background-color: #CCCCCC;
}
<div class="hello-example">
<a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
<a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zhCN">世界您好!</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好!</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment