smart use of css selectors

dabblet.css

/**
 * smart use of css selectors
 */
 
body {
	background: #f06;
	padding:100px;
}

.selector {
	padding:.5em;
	width:500px;
	margin:0 auto;
	background:rgba(255,255,255,.6);
	border-radius:5px;
}

	.selector input#hide:checked ~ ul {
		animation-name:slideUp;
		animation-iteration-count: 1;
		animation-duration:1s;
		overflow:hidden;
		animation-fill-mode: forwards;

	}
		
		 .selector input#fade:checked ~ ul {
			animation-name:fadeOut;
			animation-iteration-count: 1;
			animation-duration:1s;
			overflow:hidden;
			animation-fill-mode: forwards;
		}

ul {
	width:80%;
	margin:.5em auto;
	list-style:none;
	background:rgba(255,255,255,.6);
	border-radius:5px;
	padding:.5em 0;
	height:360px;
}

ul li {
	padding:.5em;
	background:rgba(0,0,0,.1);
	margin:.5em;
	border-radius:3px;
	color:#fff;
}

@keyframes slideUp {
	0% {}
	90% {
		height:1px;
		opacity:1;
	}
	100% {
		height:0px;
		opacity:0;
	}
}

@keyframes fadeOut {
	0% {}
	99% {
		opacity:0;
	}
	100% {
		opacity:0;
		visibility:hidden;
	}
}

dabblet.html

<!-- smart use of selectors -->

<div class="selector">
		<label for="show"> Show </label>
		<input type="radio" name="radio-select" id="show">
		<!-- <label for="fade"> Fade </label>
		<input type="radio" name="radio-select" id="fade">  -->
		<label for="hide"> Hide </label>
		<input type="radio" name="radio-select" id="hide">
	<br>
	<ul class="elements">
		<li class="first">Element 1</li>
		<li>Element 2</li>
		<li>Element 3</li>
		<li>Element 4</li>
		<li>Element 5</li>
		<li>Element 6</li>	
		<li>Element 7</li>
		<li>Element 8</li>
	</ul>

</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}