本文1行目と最後にあるタグだけにスタイルをつける

タグ記法をラベルのように使っていたが、文章中ではタグ記法をただのリンクとして使いたかったので書いてみたyuta0801.icon

セレクタをうまく活用することでそれぞれの行を選択できる

.lines .line:nth-child(2)を使うことでタイトルに隣接した行

.lines .line:last-childで最後の行

最後に空行を付けたい場合は:nth-last-child(2)で最後から2行目を選択できる

例

タグのデザインは/nwtgck/settings#5d2ad51bd08a040000bb8a69を元にしている

code:style.css

.lines .line:nth-child(2) atype='hashTag',

.lines .line:last-child atype='hashTag',

.lines .line:nth-last-child(2) atype='hashTag' {

display: inline-block;

margin: 4px;

font-size: 14px;

height: 32px;

width: auto;

padding-left: 8px;

padding-right: 8px;

padding-top: 2px;

padding-bottom: 2px;

border-radius: 2px;

border-style: none;

color: #0c0c0d !important;

background-color: rgba(12, 12, 13, 0.1);

}

.lines .line:nth-child(2) atype='hashTag':hover,

.lines .line:last-child atype='hashTag':hover,

.lines .line:nth-last-child(2) atype='hashTag':hover {

background-color: rgba(12, 12, 13, 0.2);

}

.lines .line:nth-child(2) atype='hashTag':active,

.lines .line:last-child atype='hashTag':active,

.lines .line:nth-last-child(2) atype='hashTag':active {

background-color: rgba(12, 12, 13, 0.3);

}

.lines .line:nth-child(2) atype='hashTag':focus,

.lines .line:last-child atype='hashTag':focus,

.lines .line:nth-last-child(2) atype='hashTag':focus {

box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,

0 0 0 4px rgba(10, 132, 255, 0.3);

}

code:style.scss

.lines .line {

&:nth-child(2),

&:last-child,

&:nth-last-child(2) {

atype='hashTag' {