CSS3 selector :not – En enkel slidedown

juni 7, 2012 § Lämna en kommentar

CSS3 har en ny selector som används för att välja ut det som inte är aktivt på sidan t.ex: a:not(dennaClass) <—- Det används för att välja ut alla anchors som inte har classen dennaClass. För att göra en enkel dropdown med den här stilen:

HTML (index.html):

<!DOCTYPE html>
<head>
<title>For fun</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”stil.css”>
</head>
<body>
<dl>
<dt><a href=”#Section1″>definition term 1</a></dt>
<dd id=”Section1″><p>definition data 1</p></dd>
<dt><a href=”#Section2″>definition term 2</a></dt>
<dd id=”Section2″><p>definition term 2</p></dd>
</dl>
</body>

CSS (stil.css):

dl{padding: 10px; width:20%;}
dl dt{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #cccccc;}
dl dt a {color: #777; padding: 10px; display: block;}
dl dd{color: #cccccc;margin: 0; overflow: hidden; -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease;}
dl dd p{padding: 10px; margin: 0;}
dl dd:not(:target) {height: 0; }
dl dd:target {height: 2.667em; }

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

Vad är detta?

Du läser för närvarande CSS3 selector :not – En enkel slidedownTobiasboman's Blog.

Meta

%d bloggare gillar detta: