Skip to content

Instantly share code, notes, and snippets.

@SirPepe

SirPepe/dabblet.css

Created June 1, 2013 09:26
Show Gist options
  • Save SirPepe/5689787 to your computer and use it in GitHub Desktop.
Save SirPepe/5689787 to your computer and use it in GitHub Desktop.
Download ZIP
Lösung Selektor-Übung
Raw
dabblet.css
/**
* Lösung Selektor-Übung
*/
/* Wechselnder Hintergrund */
li:nth-child(4n+1) {
background: #CCC;
}
li:nth-child(2n+2) {
background: #AAA;
}
li:nth-child(4n+3) {
background: #888;
}
/* Link-Text verschönern */
#navi a {
color: #000;
text-decoration: none;
}
/* Ersten und letzten Punkt abrunden */
#navi > li:first-child {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
#navi > li:last-child {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
/* Letzten Unternavi-Punkt abrunden */
li li:last-child {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
/* Links sind abwechselnd kursiv und normal */
li:nth-child(odd) > a {
font-style: italic;
}
/* Shop hervorheben */
#navi > li:nth-last-child(2) {
background: red;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul id="navi">
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Philosophie</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Unser Team</a>
<ul>
<li><a href="#">Rainer Zufall</a></li>
<li><a href="#">Claire Grube</a></li>
<li><a href="#">Armin Gips</a></li>
<li><a href="#">Anna Bolika</a></li>
<li><a href="#">Bill Yard</a></li>
<li><a href="#">Klaus Thaler</a></li>
<li><a href="#">Volker Putt</a></li>
</ul>
</li>
<li><a href="#">Shop</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<style>
html, body {
background: #FFF;
margin: 0;
padding: 0.5em;
}
ul {
font-size: 18px;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
#navi > li {
position: relative;
float: left;
}
#navi > li a {
display: block;
padding: 8px 16px;
}
#navi > li ul {
position: absolute;
left: 0;
display: none;
width: 10em;
}
#navi > li:hover ul {
display: block;
}
</style>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment