15 ホームページ中級講座  隣接セレクタ

Webサイト制作,ホームページ中級講座,動画

前回の14 ホームページ中級講座 display:flex のおさらいの続きになりますので、HTMLとCSSファイルは引き続き同じファイルを使っていきます。

隣接セレクタ +

グローバルナビゲーションは、どのページにも存在する目次です。

間に仕切りのborderを記述した場合、余分な線が入ってしまうのを効率的に見えないようにする手段として、前回は、last-chaild という擬似クラスを使いました。今回は隣あった要素指定の「隣接セレクタ」を使って練習しています。

動画を参照してCSSを変更してみましょう

 

CSSのコード模写を行なってみましょう

*{
    margin: 0;
}
.content{
    width:600px;
    border:solid 1px #000;
    margin:20px auto;
}
header h1{
    text-align: center;
    background: #ddd;
}
nav ul{
    list-style: none;
    padding-left:0;
    display: flex;
}
nav ul li{
    flex:1;
/*    border-right: 1px solid #000;*/
    text-align: center;
}
nav ul li + li {
    border-left: 1px solid #000;
}
/*
nav ul li:last-child{
    border-right: none;
}
*/
nav ul li a{
    color: #f00;
    text-decoration: none;
    padding:10px 0;
    display: block;
    background: #ff0;
}
nav ul li a:hover{
     background: #000;
    color: #000;
}