ログイン

問題5 擬似要素を使いこなそう!

CSSAnimationの問題

CSSAnimation

擬似要素を使いこなそう!

問題

今回は擬似要素がメインのテーマです。擬似要素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¥
            
答えのアイコン

解説

.content:not(:last-of-type)によって最後の要素以外の要素に適用という意味になります。.content:not(:hover)によってhoverされているもの以外という意味になります。
今回は擬似要素がたくさん出てきましたね。擬似要素を使うとクラス名をわざわざつけなくても特定の要素を指定できます。
完了にする!
LINEの友達追加でお役立ち動画をGET!!