子孫セレクター、nth-childセレクター、nth-of-typeセレクターを使いこなす

CSSセレクター: 別の要素の前にある要素を選択する

隣接兄弟セレクター (+)

このセレクターは、ある要素の直後に1つだけ存在する兄弟要素を選択するために使用されます。

例：

.element1 + .element2 {
  /* スタイル */
}

この例では、.element1 の直後に存在する .element2 要素のみがスタイルを受け取ります。

.element1 ~ .element2 {
  /* スタイル */
}

.parent .child {
  /* スタイル */
}

この例では、.parent 要素のすべての子孫要素である .child 要素がスタイルを受け取ります。

nth-child セレクター

.parent:nth-child(2) {
  /* スタイル */
}

nth-of-type セレクター

.parent:nth-of-type(2) {
  /* スタイル */
}

使用例

これらのセレクターは、さまざまな場面で使用できます。

• ナビゲーションバーの項目の順番を入れ替える
• リストの項目に奇数・偶数行のスタイルを適用する
• 見出しと本文の間の余白を設定する

注意事項

• 隣接兄弟セレクターと一般兄弟セレクターは、IE8 以前ではサポートされていません。
• 子孫セレクターは、複雑なネスト構造を持つHTMLでは、パフォーマンスに影響を与える可能性があります。

<div class="container">
  <div class="element1">要素1</div>
  <div class="element2">要素2</div>
  <div class="element3">要素3</div>
</div>

.element1 + .element2 {
  color: red;
}

<div class="container">
  <div class="element1">要素1</div>
  <div class="element2">要素2</div>
  <div class="element3">要素3</div>
  <div class="element2">要素4</div>
</div>

.element1 ~ .element2 {
  color: red;
}

<div class="container">
  <div class="parent">
    <div class="child">要素1</div>
    <div class="child">要素2</div>
  </div>
</div>

.parent .child {
  color: red;
}

<div class="container">
  <div class="parent">
    <div class="child">要素1</div>
    <div class="child">要素2</div>
    <div class="child">要素3</div>
  </div>
</div>

.parent:nth-child(2) {
  color: red;
}

<div class="container">
  <div class="parent">
    <div class="div">要素1</div>
    <div class="child">要素2</div>
    <div class="div">要素3</div>
  </div>
</div>

.parent:nth-of-type(2) {
  color: red;
}

CSSセレクターには、さまざまな種類があり、さまざまな方法で要素を選択できます。

CSSセレクター: 別の要素の前にある要素を選択する - その他の方法

JavaScriptを使用して、DOMを操作することで、要素を選択することができます。

const element1 = document.querySelector('.element1');
const element2 = element1.previousElementSibling;

// element2 にスタイルを適用

jQueryを使用すると、より簡単に要素を選択することができます。

$('.element1').prev().css('color', 'red');

CSS Gridレイアウトを使用すると、要素を簡単に配置することができます。

.container {
  display: grid;
}

.element1 {
  grid-area: 1 / 1;
}

.element2 {
  grid-area: 1 / 2;
}

.container {
  display: flex;
}

.element1 {
  order: 1;
}

.element2 {
  order: 2;
}

• JavaScriptやjQueryは、複雑な処理を行う場合に適しています。
• CSS GridやFlexboxは、レイアウトを簡単に設定する場合に適しています。