ログイン
問題5

擬似要素を使いこなそう

アイコン画像

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

コメントのアイコン解説

.content:not(:last-of-type)によって最後の要素以外の要素に適用という意味になります。.content:not(:hover)によってhoverされているもの以外という意味になります。
今回は擬似要素がたくさん出てきましたね。擬似要素を使うとクラス名をわざわざつけなくても特定の要素を指定できます。
ログインして解答を見る
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる