CSSセレクタの相対位置を使った要素選択方法と使い方の例 – 初心者向け詳解

はじめに

CSS（Cascading Style Sheets）は、HTML文書のスタイルを定義するための言語です。CSSセレクタを使うことで、HTML文書内の要素を選択してスタイルを適用できます。

CSSセレクタには、様々な種類がありますが、本記事では、相対位置を使った要素選択方法に焦点を当てて解説します。

相対位置を使うことで、特定の要素を親要素や兄弟要素などの関係性をもとに選択することができます。

相対位置の使い方を正しく理解することで、より効率的かつ柔軟に要素を選択できるようになります。

下記では、相対位置の使い方と具体的な例を解説します。

子要素セレクタは、「親要素 > 子要素」の形式で記述します。

このセレクタを使うことで、指定した親要素の直下にある子要素を選択することができます。

例えば、次のようなHTML文書があった場合、ul要素の直下にあるli要素を選択するには、次のようなCSSセレクタを使います。

ul > li {
  color: red;
}

これによって、ul要素の直下にあるli要素のテキストの色が赤に変わります。

次兄弟セレクタは、「要素 ~ 次兄弟要素」の形式で記述します。

このセレクタを使うことで、指定した要素より後ろにある同じレベルの要素を選択することができます。

例えば、次のようなHTML文書があった場合、id属性がheaderの要素の後ろにあるclass属性がtitleの要素を選択するには、次のようなCSSセレクタを使います。

#header ~ .title {
  font-size: 24px;
}

これによって、id属性がheaderの要素の後ろにあるclass属性がtitleの要素のフォントサイズが24pxに変わります。

直前兄弟セレクタは、「要素 + 直前兄弟要素」の形式で記述します。

このセレクタを使うことで、指定した要素の直前にある同じレベルの要素を選択することができます。

例えば、次のようなHTML文書があった場合、class属性がtitleの要素の直前にあるp要素を選択するには、次のようなCSSセレクタを使います。

.title + p {
  margin-top: 10px;
}

これによって、class属性がtitleの要素の直前にあるp要素の上部のマージンが10pxに変わります。

親要素セレクタは、「親要素要素」の形式で記述します。

このセレクタを使うことで、指定した親要素内にある要素を選択することができます。

例えば、次のようなHTML文書があった場合、id属性がcontainerの親要素内にあるclass属性がboxの要素を選択するには、次のようなCSSセレクタを使います。

#container .box {
  border: 1px solid black;
}

これによって、id属性がcontainerの親要素内にあるclass属性がboxの要素のボーダーが黒色の1px幅の線になります。

以上が、相対位置を使った要素選択の例です。

これらのセレクタを組み合わせることで、より複雑な要素選択も可能になります。

例えば、次のようなHTML文書があった場合、class属性がboxの要素の直下にあるimg要素のみを選択するには、次のようなCSSセレクタを使います。

<div class="box">
  <img src="example.jpg" alt="example">
  <p>Example Text</p>
</div>
<!-- こちらがHTMLです。 -->

.box > img {
  width: 100%;
}

これによって、class属性がboxの要素の直下にあるimg要素の幅が100%になります。

また、相対位置を使った要素選択は、レスポンシブデザインの実装にも役立ちます。

例えば、次のようなHTML文書があった場合、スマートフォンの画面サイズでは、class属性がboxの要素内のclass属性がimageの要素のみを表示し、それ以外の要素を非表示にするには、次のようなCSSセレクタを使います。

<div class="box">
  <img src="example.jpg" class="image" alt="example">
  <p class="caption">Example Text</p>
</div>
<!-- HTMLです。 -->

@media screen and (max-width: 480px) {
  .box > .image {
    display: block;
  }
  .box > .caption {
    display: none;
  }
}

これによって、スマートフォンの画面サイズでは、class属性がboxの要素内のclass属性がimageの要素のみが表示され、それ以外の要素は非表示になります。

相対位置を使った要素選択は、CSSを効率的かつ柔軟に書くことができるため、CSSを学ぶ上で重要な概念です。

是非、この記事を参考にして、相対位置を使った要素選択について学んでみてください。

CSSセレクタの相対位置を使うことで、特定の要素を親要素や兄弟要素などの関係性をもとに選択することができます。

相対位置の使い方を正しく理解することで、より効率的かつ柔軟に要素を選択できるようになります

子要素セレクタ、次兄弟セレクタ、直前兄弟セレクタ、親要素セレクタなど、相対位置を使った要素選択の例を紹介しました。

これらのセレクタを組み合わせることで、より複雑な要素選択も可能になります。

また、相対位置を使った要素選択は、レスポンシブデザインの実装にも役立ちます。

是非、この記事を参考にして、相対位置を使った要素選択について学んでみてください。