問題
5
CSSアニメーション
擬似要素を使いこなそう
CSSアニメーションの問題に挑戦しよう！
問題
「擬似要素を使いこなそう」
今回は擬似要素がメインのテーマです。擬似要素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¥
期待する画面
解答と解説（擬似要素を使いこなそう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
.content:not(:last-of-type)によって最後の要素以外の要素に適用という意味になります。.content:not(:hover)によってhoverされているもの以外という意味になります。
今回は擬似要素がたくさん出てきましたね。擬似要素を使うとクラス名をわざわざつけなくても特定の要素を指定できます。
