【CSS】投稿済み記事のレイアウトを隣の隣のセレクタで何とかしてみる
今まで記事の中で２行以上のリンクを作成したい場合に、単純にaタグに、改行（br）、aタグ、改行（br）…で挿入していました。
ただこれだと、行間が無くて１つのリンクタイトルが折り返して２行になると１つ目と２つ目のタイトルの区切りが分かり難くなり（スマホ用の画面で見ると特に）、今更ながら面倒がらずにULタグで書いておけば、、と思う訳ですが既に記事の中に書いているので全て修正していくのも修正も辛い。
そこでCSSで何とかしようと思った訳です。
浅はかな考えでクラスを指定して記事内のaタグに限定した設定をしようと思ったのですが、当然aタグはこの対象としたいリンクだけではないので全てに影響してしまう、、と言うことで結局しばらく塩漬けにしていました。
先日ふと、やりたかったのはaタグが並んでいる場合に間隔を少し空けたい、この場合だと「aの隣のbrの隣のa」が指定できれば、と思った訳ですが実際に隣接を示すセレクタ（+）は重ねられるんですね。（常識でしたらすいません…）
例で
<a href="#">Test1</a><br />
<a href="#">Test2</a><br />
<a href="#">Test3</a><br />
<a href="#">Test4</a><br />と言うタグの並びがあった場合に
<style>
a+br+a { font-size:150%; }
</style>とCSSを記述をすれば、
と、ちゃんとTest2以降にスタイルが適用されています。
今回やりたいのは間隔を空けるですので、margin-topを指定します。
ただ、aタグはインライン要素なので、inline-block属性の設定を加えておくのがちょっとしたポイントでしょうか。
これで調整することができました！
