LoginSignup
0
0

More than 5 years have passed since last update.

child擬似クラス

Posted at

連続する要素の最初もしくは最後の要素に指定をする方法

:first-child 最初に現れる要素にだけ適用
:last-child 最後に現れる要素にだけ適用

今回は最後の文字の下のボーダーを無しにする指定
HPのサンプル作成
↓一部

HTML
<div class="main-menu">
    <h3>革新的な技術</h3>
    <ul>
        <li><a href="#">環境への取り組みについての説明ページです</a></li>
        <li><a href="#">ecoキャンペーン開催中です</a></li>
        <li><a href="#">オフィスの移転に関して</a></li>
        <li><a href="#">最新商品のご紹介</a></li>
        <li><a href="#">新規サービスを開始しました</a></li>
        <li><a href="#">環境賞受賞に関してはこちらをご確認ください</a></li>
    </ul>
</div>
CSS
.main-menu{
    border:solid 1px #ebebeb;
    width:243px;
    height:340px;
    margin:15px 5px 0px 0px;
}
.main-menu h3{
    width:237px;
    height:30px;
    padding:7px 0px 0px 7px;
    margin:0px;
    font-weight:normal;
    font-size:15px;
    background:#eeeeee;
}
.main-menu ul{
    padding:0px 10px 0px 10px;
    margin:0px;
}
.main-menu ul li{
    border-bottom:dashed 1px #ebebeb;
    padding:12px 0px 12px 5px;
    font-size:12px;
    list-style-type:none
}
.main-menu ul li:last-child{
    border-bottom-style:none;
}
.main-menu ul li a{
    text-decoration:none;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0