CSSAnimation
Googleでログイン問題5：擬似要素を使いこなそう
今回は擬似要素がメインのテーマです。擬似要素notを含むセレクタのみでデモのようなものを作ってください。
あらかじめエディタに書くコード
<div class="box">
<div class="content">コンテンツ1</div>
<div class="content">コンテンツ2</div>
<div class="content">コンテンツ3</div>
<div class="content">コンテンツ4</div>
</div>
¥HTML¥
.box{
background-color: #eeeeee;
padding: 50px;
display:inline-block;
}
.content{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
transition:5s;
}
.content:first-of-type{
background-color: crimson;
}
.content:nth-of-type(2){
background-color: cornflowerblue;
}
.content:nth-of-type(3){
background-color: bisque;
}
.content:nth-of-type(4){
background-color: cadetblue;
}
¥CSS¥
期待する画面
解答ソースコード
.content:not(:last-of-type){
margin-bottom: 30px;
}
.content:not(:hover){
opacity: .5;
}
¥CSS¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
今回は擬似要素がたくさん出てきましたね。擬似要素を使うとクラス名をわざわざつけなくても特定の要素を指定できます。