Lopan cafe

これは「~(間接セレクタ)」のサンプルです。
※所々に入るパンの話はダミー文として読み流してください。
※各テキストの要素名が分かるように::before疑似要素と::after疑似要素を使って、タグを表示してます。

Lopan cafeのご紹介

~(チルダ)(間接セレクタ)を使って、以下のふたつのスタイルを用意しました。

それぞれ、どのように反映されるか見てみましょう。

このテキストは、<h3>より上にあるので、赤い枠線はつきません。

Lopanのパン

このテキストのように「<h3>より下に書かれた<p>」には、赤い枠線がつきます。
下の<ol>の中の<li>の中にも<p>がありますが、同じ階層ではないので、赤い枠線はつきません。

このテキストは、<h3>同じ階層にあるので、赤い枠線がつきます。

パン

このテキストは、<h3>同じ階層じゃないので、赤い枠線はつきません。下の<blockquote>の中の<p>も同じく。

1718年発行の『御前菓子秘伝抄』には、酵母菌を使ったパンの製法が記載されている。酵母菌の種として甘酒を使うという本格的なものであるが、実際に製造されたという記録はない。最初にパン(堅パン)を焼いた日本人は江戸時代の末の江川英龍とされ、彼を日本のパン祖と呼ぶ。パン - Wikipedia

2つめのスタイル「<blockquote>より下に書かれた同じ階層の<p>」は、背景色がグレーになります。

このテキストは<h3>同じ階層

このテキストは、上の<h3>と同じアウトラインレベルですが、セクションが違うので、赤い枠線はつきません。

店舗について

Lopan cafeは架空の店舗です。

手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。
おいしいパンとあったかカフェで、心やすらぐ特別なひとときをご提供いたします。Lopanのパン | カフェ&ベーカリー「Lopan cafe」

美味しそうなパンがめくるめくよりどりみどり。