最初の児童修飾見出し

Question

タブのセットを変更しようとしています。最初のタブは左と右に、中央には、短縮バージョン：https://jsfiddle.net/qqwc51sb/2/があります。

.krown-tabs .titles li { 
    border: 1px solid #000; 
    width: 20%; 
    display: table; 
    float: left; 
} 
.krown-tabs .titles h5 { 
    text-align: center; 
} 
.krown-tabs .titles h5:first-child { 
    text-align: left; 
} 

:first-childは<h5>が修飾されているので、私が思うに、動作しません。ただし、残りのタブテキストの書式設定はこのセレクタ内にあり、<h5>がなければ機能しません。

あなたは

Answer 1

あなたが<li>、未<h5>ため:first-childと:last-childを使用する必要がありますありがとうございました。

.krown-tabs li:first-child h5 { 
    background: red; 
} 
.krown-tabs li:last-child h5 { 
    background: blue; 
} 

.krown-tabs .titles li, .memberdeck .dashboardmenu li { 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
    display: table; 
 
    float: left; 
 
} 
 
.krown-tabs .titles h5 { 
 
    text-align: center; 
 
} 
 
.krown-tabs .titles h5:first-child { 
 
    text-align: left; 
 
} 
 
.krown-tabs li:first-child h5 { 
 
    background: red; 
 
} 
 
.krown-tabs li:last-child h5 { 
 
    background: blue; 
 
}

<div class="krown-tabs clearfix"> 
 
    <ul class="titles clearfix autop"> 
 
    <li class=""> 
 
     <h5>All</h5> 
 
    </li> 
 
    <li class="opened"> 
 
    <h5>Arts</h5> 
 
    </li> 
 
    <li> 
 
     <h5>Fashion</h5> 
 
    </li> 
 
    <li> 
 
     <h5>Food & Drink</h5> 
 
    </li> 
 
    <li> 
 
     <h5>Wellbeing</h5> 
 
    </li> 
 
    </ul> 
 
</div>