{category}

CSS - 隣接兄弟セレクタ

+

プラス(セレクタ

意味 隣接する兄弟要素


+とは?

+セレクタは、隣接兄弟セレクタとも呼ばれ、特定の要素の直後に来る特定の兄弟要素にスタイルを適用するために使用します。

+の具体的な使い方

隣接セレクタの使用例

<style>
    h1 + p {
        margin-top: 50;
    }
</style>

<h1>見出し</h1>

<p>隣接する段落</p>

h1要素の直後に来るp要素の上部の余白を50に設定します。隣接する段落との間にスペースができます。

+に関するよくある質問

Q. +セレクタの適用範囲は?
A. +セレクタは、指定した要素の直後に来る隣接兄弟要素のみに適用されます。間に他の要素が入ると適用されません。
Q. +と>セレクタの違いは?
A. +は隣接兄弟要素を選択しますが、>は親子関係の直接の子要素を選択します。+は同じレベルの要素間で使用され、>は階層関係で使用されます。
Q. 複数の+セレクタを連続で使える?
A. はい、可能です。例えば、h1 + p + p は、h1の直後のpの次に来るpを選択します。これにより、より具体的な要素の組み合わせを指定できます。

+が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか?
プログラミング単語帳には、CSSの+や:nth-last-of-type()、::after、[attr~=value]、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。

1日5分の暗記でプログラミンが身に付く!プログラミング単語帳 公式ストアで発売中!

HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。


CSSを学べる「プログラミング単語帳」アプリ

プログラミング単語帳がアプリになりました!CSSはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。

収録単語は2,000単語以上!
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。

いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。

2024年7月アップデート情報:「Laravel」カテゴリーが追加されましました!

2024年8月アップデート情報:「MySQL」「Linux」カテゴリーが追加されましました!


関連するそのほかの単語

:nth-last-of-type()

特定のタイプの要素の中で、後ろから数えてn番目の要素

種類: 疑似クラス

::after

after疑似要素

種類: 疑似要素

[attr~=value]

属性値が特定の単語を含む要素

種類: 属性セレクタ

@media (max-aspect-ratio: ...)

特定のアスペクト比以下の場合に適用

種類: メディア特性

background-repeat

背景画像の繰り返し

種類: 背景