擬似要素を使いこなそう

Question

問題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¥

Answer 1

解答ソースコード

              .content:not(:last-of-type){
  margin-bottom: 30px;
}
.content:not(:hover){
  opacity: .5;
}
¥CSS¥

擬似要素を使いこなそう

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

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説