序章

セレクターは、WebブラウザーがCSSを介して特定のスタイルを検索して要素に適用するために使用するものです。 これらのスタイルは、同じ種類の多くの要素を選択するタイプセレクターを使用して広く適用できます。 次のような要素の特定の属性をターゲットにすることに加えて id また class、別の要素との関係または近接性に基づいて要素を選択することができます。 たとえば、前の要素またはシリーズの最初の要素に続くHTML要素を選択できます。

このチュートリアルでは、CSS関係に基づくいくつかのアプローチを使用して、HTMLページの要素を選択してスタイルを設定します。 リレーションシップセレクターごとに異なるスタイルシナリオでコンテンツのページを作成します。 子孫コンビネータ、子コンビネータ、一般的な兄弟コンビネータ、および隣接する兄弟コンビネータ、および first-, last-, only-、 と nth-child 疑似クラスセレクター。 これらのセレクターは、従来のセレクターの直接的な方法とは対照的に、周囲の要素の相対的な条件に基づいてスタイルを適用します。

前提条件

初期HTMLとCSSの設定

まず、チュートリアルの残りの部分で作業するHTMLおよびCSSコードを設定します。

開くことから始めます index.html テキストエディタで。 次に、次のHTMLをファイルに追加します。

index.html
<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

次に、 <head> タグを付けて追加します <meta> HTMLファイルの文字セットを定義するタグ。 次に、ページのタイトルを設定し、 <meta> モバイルデバイスがページをレンダリングする方法を定義するタグ。最後に、後で作成するCSSファイルをロードします。 <link> 鬼ごっこ。 これらの追加は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Relationship Selectors</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

追加した後 <head> コンテンツ、に移動します <body> 要素。CSSセレクターについて説明しているページのコンテンツを追加します。 このコードブロックから強調表示されたセクションを index.html テキストエディタのファイル:

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Relationship Selectors</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Relationship Selectors</h1>
    <main class="content-width">
    </main>
  </body>
</html>

これらの追加を必ず保存してください index.html. The <h1> elementは、ページのタイトルを表示します。 The <main> 要素と class の属性 content-width チュートリアル全体で追加するページのコンテンツが含まれます。

次に、という新しいファイルを作成します styles.css あなたと同じディレクトリに index.html ファイルを作成し、テキストエディタで新しいファイルを開きます。 このファイルは、ブラウザがコンテンツに適用するスタイルをロードします index.html. 次のCSSコードを styles.css ファイル:

styles.css
body {
  font-family: system-ui, sans-serif;
  color: #333;
}

.content-width {
  width: 90%;
  margin: 2rem auto;
  max-width: 70ch; 
}

section{
  margin: 4rem 0;
}

h1 {
  text-align: center;
}

h2 {
  color: mediumblue;
}

このコードでは、 body タイプセレクターは、の新しいデフォルトを定義します font-familycolor ページ上の値。 The .content-width クラスセレクターは、ページの幅の90 % o fに設定され、現在の最大幅70文字の幅に拡大します。 font-size. 70文字は、テキスト行の理想的な最大長です。 The margin.content-width プロパティは、要素の上下にスペースを保持し、コンテナを水平方向の中央に保持します。 いくつかあります <section> このページの要素なので、 section タイプセレクターは margin 各グループの間に十分なスペースを与えるため。 最後に、 h1h2 タイプセレクターは <h1> 中央に配置されるコンテンツと <h2> の色を持つコンテンツ mediumblue.

このセクションでは、HTMLファイルとCSSファイルの開始点を設定します。 次のセクションでは、さらにコンテンツを追加します index.html次に、子孫コンビネータを使用して、CSSでスタイルを適用します。

子孫コンビネーター

リレーションシップベースのセレクターを使用する場合、祖先、この場合は子孫などの家族用語に出くわします。 。 子孫コンビネーターは、特定の祖先を持つ要素にスタイルを適用するために、HTML構造に一致するセレクターのスペースで区切られたリストです。 リストの最後のセレクターはスタイルを受け取るセレクターであり、リストの前のセレクターの子孫です。

子孫コンビネーターは、スタイルをスコープにする最も簡単な方法です。 スコープは、セレクターの特異性を高めるために追加の詳細を提供する方法です。 子孫コンビネーターは、セレクターの前に祖先セレクターを追加することにより、スコーピングを支援します。 たとえば、 a タイプセレクターはすべてを取得します <a> ページ上のタグですが、 header a 子孫セレクターは、 <a> 内部のタグ <header> エレメント。

子孫コンビネータの使用を開始するには、 index.html テキストエディタで。 作成する <section> 要素と class の属性 descendant. 内部 <section> 要素、追加 <h2> を含む要素 Descendant Combinator Selector、次に2つ追加します <p> 要素を作成し、 CupcakeIpsumのコンテンツで埋めます。 2番目をラップします <p> の要素 <blockquote>. 次のコードブロックで強調表示されているHTMLは、これがどのように設定されるかを示しています。

index.html
...
<main class="content-width">
  <section class="descendant">
    <h2>Descendant Combinator Selector</h2>
    <p>Sweet roll pudding ice cream jelly beans caramels cookie caramels. Macaroon cheesecake cookie marzipan icing jujubes. Chocolate bar jelly-o wafer toffee cookie muffin soufflé lemon drops bonbon. Soufflé danish gingerbread sweet roll marzipan carrot cake.</p>

    <blockquote>
      <p>Bear claw pastry tootsie roll biscuit jujubes oat cake toffee wafer lemon drops. Croissant pie lemon drops cake chupa chups chocolate bar chupa chups marshmallow. Cake pudding icing tiramisu tiramisu pastry topping. Gingerbread shortbread lollipop chocolate bar icing.</p>
    </blockquote>
  </section>
</main>
...

変更をに保存します index.html 次に開きます styles.css テキストエディタで。 追加する .descendant クラスセレクター、スペース、そして blockquote タイプセレクター。 これにより、スタイルをにのみ適用するセレクターが作成されます。 blockquote 要素内にある要素 class を含む属性 descendant. 次のコードブロックで強調表示されているCSSは、このセレクターと blockquote エレメント:

styles.css
...
h2 {
  color: mediumblue;
}

.descendant blockquote {
  margin: 2rem 0;
  padding: 1rem 1rem 1rem 2rem;
  border-left: 0.125rem indigo solid;
  background-color: lavender;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 これで使用されるプロパティ blockquote 要素は、上下に追加の間隔を提供します margin 財産。 そうして padding プロパティは、コンテナ内のコンテンツスペースを提供します。 最後に、コンテナは、 border-left ソリッドを作成するプロパティ indigo ラインと lavender で適用される背景 background-color 財産。 次のスクリーンショットは、このコードがブラウザーでどのようにレンダリングされるかを示しています。

HTMLの祖先セレクターとの相対的な深さに関係なく、子孫コンビネーターセレクターを子孫要素に適用することもできます。 前のコードセットのスタイルを <blockquote> 内部の要素 .descendant クラスセレクター、次にすべてにスタイルを適用します <p> 要素は、それらが含まれている要素に関係なく。

あなたに戻る styles.css テキストエディタでファイルします。 次に、新しい子孫コンビネータセレクターを追加します。 p の祖先を持つ要素セレクター .descendant. セレクターブロック内で、 line-height の値へのプロパティ 1.5. 次のコードブロックで強調表示されているCSSは、これがどのように表示されるかを示しています。

styles.css
...
.descendant blockquote {
  margin: 2rem 0;
  padding: 1rem 1rem 1rem 2rem;
  border-left: 0.125rem indigo solid;
  background-color: lavender;
}

.descendant p {
  line-height: 1.5;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 両方のテキスト行 <p> それらの1つにもかかわらず、要素は現在大きくなっています <p> 内部にある要素 <blockquote> エレメント。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

最後に、あなたに戻ります styles.css テキストエディタでファイルします。 新しい子孫セレクターを作成して、スタイルを直接に適用します。 <p> 内部の要素 <blockquote> エレメント。 書き出すことから始めます .descendant blockquote p、ブラウザに検索するように指示します <p> ページ内のどこかにある要素 <blockquote> 要素。これは、要素の内部にあります。 class の属性 descendant. 次に、セレクターブロックに、 font-size プロパティをに設定 1.25remcolor とのプロパティ #222 値として。 次のコードブロックで強調表示されているCSSは、必要な構造を示しています。

styles.css
...
.descendant p {
  line-height: 1.5;
}

.descendant blockquote p {
  font-size: 1.25rem;
  color: #222;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 The font-size<p> 内部の要素のコンテンツ <blockquote> 次の画像に示すように、これではるかに大きくなり、わずかに柔らかい灰色になります。

このセクションでは、子孫コンビネーターセレクターを使用して、スタイルを適用するために別の要素の内部にある要素にスタイルをスコープしました。 次のセクションでは、子コンビネーターセレクターを使用して、要素の第1レベルの子のみを選択します。

チャイルドコンビネーターセレクター

スタイルをスコーピングする場合、祖先セレクター内のすべての要素ではなく、要素のすぐ内側にある要素だけが必要な場合があります。 たとえば、サブナビゲーション要素に含まれているリンクではなく、ナビゲーションバーのすべてのトップレベルリンクのスタイルを設定したい場合があります。 特定の親の子のみをスタイリングする必要があるこれらの瞬間には、子コンビネーターセレクターを使用できます。

この新しいセレクターを使用する前に、 index.html テキストエディタで、次のコードブロックから強調表示されたHTMLを <main> 要素と前の後に <section> エレメント:

index.html
...
<main class="content-width">
  ...
  <section class="child">
    <h2>Child Combinator Selector</h2>

    <p>Sweet roll carrot cake cake chocolate bar sugar plum. Cheesecake caramels jelly-o sugar plum icing muffin marzipan chocolate bar jujubes. Dessert cotton candy gummies chocolate cake sweet.</p>

    <div>
      <p>Liquorice sesame snaps chocolate bar soufflé oat cake candy canes fruitcake lollipop candy. Macaroon wafer cotton candy tootsie roll jelly halvah. Icing powder soufflé toffee dessert gummies bear claw donut cake.</p>
    </div>
  </section>
</main>
...

変更をに保存します index.html 次に開きます styles.css テキストエディタで。

まず、拡張します .descendant p セレクター line-height 含めるプロパティ <p> 内部にある要素 <section> とともに child クラス。 複数のセレクターが同じスタイルを共有できるようにする一般的なコンビネーターを使用して達成します。 スタイルを適用するには、各セレクターの間にコンマが必要です。 の後にコンマを追加します .descendant p セレクター、次に追加します .child p 次の強調表示されたコードに示されているように、子孫コンビネータ:

styles.css
...
.descendant p,
.child p {
  line-height: 1.5;
}
...

変更をに保存します styles.css 開いて index.html ブラウザで。 新しいセクションのコンテンツでは、テキストの各行の間に大きなスペースができます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

次に、 <p> 要素、これはの直接の子です <section class="child"> 要素の場合、子コンビネータセレクターを使用します。 これは、親セレクターの後に大なり記号(>)そして子セレクター。

戻る styles.css テキストエディタで、ファイルの最後に移動します。 親セレクターを次のように設定して、子コンビネーターセレクターを作成します。 .child と子セレクターとして p. 次に、セレクターブロック内に color の名前付き値へのプロパティ forestgreen. 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css
...
.descendant blockquote p {
  font-size: 1.25rem;
  color: #222;
}

.child > p {
  color: forestgreen;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 最初だけ <p> 要素のテキストは forestgreen 色。 The <div> 2番目をラップする要素 <p> 要素は、関係を変更します <section> 子供から孫への要素。 このため、それ <p> 子コンビネータセレクタの要素が無効です。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、子コンビネーターセレクターを使用して、スタイルを選択し、親要素の直接の子に適用しました。 次のセクションでは、兄弟要素の関係を操作して、要素に共通の親がある場合に要素にスタイルを適用します。

兄弟コンビネーターセレクター

一般的な兄弟コンビネーターは、特定の要素の後にあり、同じ親要素を持つが、互いに隣接していない可能性がある要素にスタイリングをスコープする方法を提供します。 多くの場合、これは、動的に生成されたコンテンツなど、HTMLは一般的に知られているが、予測できない場合に発生します。

まず、セレクターを使用するにはHTML兄弟が必要です。 戻る index.html テキストエディタで。 次に、閉じる前に、次のコードブロックから強調表示されたHTMLを追加します </main> 鬼ごっこ:

index.html
...
<main class="content-width">
  ...
  <section class="general-sibling">
    <h2>General Sibling Combinator Selector</h2>

    <p>Donut dessert jelly-o pie gingerbread jelly-o gummies biscuit gummies. Fruitcake jelly bonbon croissant carrot cake gummies. Candy canes apple pie liquorice gummi bears shortbread lemon drops jelly-o marzipan halvah. Jujubes chocolate bar tart bear claw sweet.</p>

    <div>
      <p>Carrot cake soufflé oat cake gummies marzipan sugar plum pastry jujubes. Tootsie roll pastry danish cake cake cake jelly sesame snaps. Donut pastry brownie brownie pie croissant</p>
    </div>

    <p>Gummies apple pie gingerbread cheesecake chupa chups cookie jelly beans. Tootsie roll dessert liquorice jujubes apple pie biscuit gummies biscuit jelly-o. Cake candy canes danish sugar plum biscuit lemon drops icing.</p>

    <p>Jelly beans candy candy cookie cotton candy. Liquorice gummies biscuit dragée sesame snaps oat cake tiramisu. Powder sweet dessert chupa chups ice cream sweet.</p>
  </section>
</main>
...

変更をに保存します index.html、次に開きます styles.css テキストエディタで。

次に、グループ化セレクターを拡張します line-height 含めるプロパティ <p> 内部にある要素 <section> とともに general-sibling クラス。 繰り返しますが、これは、 .child p セレクターと追加 .general-sibling p 次の強調表示されたCSSに示すように、子孫コンビネータ。

styles.css
...
.descendant p,
.child p,
.general-sibling p {
  line-height: 1.5;
}
...

変更をに保存します styles.css 更新します index.html ブラウザで。 新しいセクションのコンテンツでは、テキストの各行の間に大きなスペースができます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

次に、兄弟のスタイルを記述します <p> 次々とやってくる要素 <p> 同じ親の要素。 これは、セレクターを記述し、その後にチルダ(~)、続いてスタイルを設定したい兄弟のセレクター。

戻る styles.css テキストエディタで、次の新しいセレクタを追加します .general-sibling p. これは <p> を持っている親を持つ要素 class 属性を持つ general-sibling. 次に、チルダ記号に続いて p 要素セレクター。 セレクターブロック内で、 color の名前付き値へのプロパティ lightseagreen、次のコードブロックの強調表示されたCSSに示されているように:

styles.css
...
.child > p {
  color: forestgreen;
}

.general-sibling p ~ p {
  color: lightseagreen;
}

変更をに保存します styles.css ブラウザに戻って更新します index.html. 次の画像は、このコードがブラウザでどのようにレンダリングされるかを示しています。

4つの段落の最後の2つだけが lightseagreen 色。 これは、最初の段落が初期化セレクターであるためです。 .general-sibling p コンビネータの一部、つまり後続の <p> 要素はスタイリングを受け取ります。 テキストの2番目の段落は <p> 要素ですが、内部にネストされているため <div> 要素それはもはや初期化セレクターの兄弟ではありません。

兄弟セレクターは、同じ要素タイプである必要はありません。 これを実証するには、に戻ります styles.css テキストエディタでファイルを作成し、最初のファイルを変更します p セレクターで div 代わりに、次のコードブロックで強調表示されているように:

styles.css
...
.general-sibling div ~ p {
  color: lightseagreen;
}

その小さな変更をに保存します styles.css 更新します index.html ブラウザで。 視覚的には何も変わりませんでしたが、ブラウザによるスタイルの適用方法は変わりました。 スタイルを受け取る要素は、 <p> チルダの前のセレクターに続く兄弟である要素。 HTMLの順序は <p />, <div />, <p />、 それから <p />、両方の一般的な兄弟セレクターの結果は同じです。 最初 <p> 要素は兄弟ですが、初期化の前に来るため、スタイルを受け取りません .general-sibling div セレクタ。

このセクションでは、一般的な兄弟コンビネーターを使用して、特定の種類の兄弟要素にスタイルを適用しました。 次のセクションでは、隣接する兄弟コンビネーターを使用して、要素の直後の兄弟にスタイルを適用します。

隣接する兄弟コンビネーターセレクター

HTMLで2つの特定の要素が隣り合っている場合にのみスタイルを適用する必要がある場合は、隣接する兄弟コンビネーターが適切な要素の選択に役立ちます。 これは、見出しテキストと本文テキストの間にスペースを追加する場合、または要素間に仕切りを追加する場合に役立ちます。

隣接する兄弟コンビネータでの作業を開始するには、最初に開きます index.html テキストエディタで。 次に、内部 <main> 要素、次のコードブロックから強調表示されたHTMLを追加します。

index.html
...
<main class="content-width">
  ...
  <section class="adjacent-sibling">
    <h2>Adjacent Sibling Combinator Selector</h2>

    <p>Donut dessert jelly-o pie gingerbread jelly-o gummies biscuit gummies. Fruitcake jelly bonbon croissant carrot cake gummies. Candy canes apple pie liquorice gummi bears shortbread lemon drops jelly-o marzipan halvah. Jujubes chocolate bar tart bear claw sweet.</p>

    <div>
      <p>Carrot cake soufflé oat cake gummies marzipan sugar plum pastry jujubes. Tootsie roll pastry danish cake cake cake jelly sesame snaps. Donut pastry brownie brownie pie croissant</p>
    </div>

    <p>Gummies apple pie gingerbread cheesecake chupa chups cookie jelly beans. Tootsie roll dessert liquorice jujubes apple pie biscuit gummies biscuit jelly-o. Cake candy canes danish sugar plum biscuit lemon drops icing.</p>

    <p>Jelly beans candy candy cookie cotton candy. Liquorice gummies biscuit dragée sesame snaps oat cake tiramisu. Powder sweet dessert chupa chups ice cream sweet.</p>
  </section>
</main>

変更をに保存します index.html、次に開きます styles.css テキストエディタで。 のセレクターグループを拡張します line-height.adjacent-sibling p、次のコードブロックで強調表示されているように:

styles.css
...
.descendant p,
.child p,
.general-sibling p,
.adjacent-sibling p {
  line-height: 1.5;
}
...

次に、の最後の行に移動します styles.css ファイル。 ここでは、隣接する兄弟コンビネータセレクターを記述して、上部の境界線と追加のパディングをに適用します。 <p> 別の要素が前にある要素 <p> エレメント。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css
...
.general-sibling div ~ p {
  color: lightseagreen;
}

.adjacent-sibling p + p {
  border-top: 1px solid black;
  padding-top: 1em;
}

このスタイルはにのみ適用する必要があるため <p> 内部の要素 <section class="adjacent-sibling"> 要素の場合、最初のセレクターは子孫コンビネータを使用する必要があります。 セレクターの2番目の要素は、兄弟に隣接する要素であるため、要素セレクターを使用するだけで済みます。

注:兄弟セレクターを操作するときは、シーケンスの最後のセレクターが選択された要素であることを覚えておくことが重要です。 隣接する兄弟コンビネータが次のように記述されたとしましょう .adjacent-sibling p + .adjacent-sibling p. このコードの目的は、 <p><p> の祖先の中 .adjacent-sibling. しかし、代わりに、この隣接する兄弟セレクターは、 <p> の祖先の中 .adjacent-sibling それは直後に来る <p> 兄弟、これは別の要素の子孫であり、 classadjacent-sibling.

変更をに保存します styles.css 更新します index.html ブラウザで。 境界線は最後の段落の上にレンダリングされます。これは、 <p> の隣にあります <p>. 次の画像に示すように、上部の余分なパディングはマージンを視覚的に補正するため、線の上下に等間隔があります。

このセレクターは、兄弟のようなものに限定されません。 あらゆる種類の兄弟セレクターにすることができます。 戻る styles.css 新しい隣接する兄弟セレクターを作成して、間に赤い境界線を追加します。 <div> 要素と隣接 <p> いくつかの余分な上部のパディングと一緒に要素。 次のコードブロックで強調表示されているCSSは、これがどのように設定されるかを示しています。

styles.css
...
.adjacent-sibling p + p {
  border-top: 1px solid black;
  padding-top: 1em;
}

.adjacent-sibling div + p {
  border-top: 1px solid red;
  padding-top: 1em;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 これで、2番目と3番目の段落の間に赤い線が表示されます。 <div> 要素はの隣にあります <p> エレメント。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、隣接する兄弟コンビネーターを使用して、兄弟要素の直後の要素にスタイルを適用しました。 次のセクションでは、最初の子疑似クラスを使用して、親の最初の要素にスタイルを適用します。

first-child 疑似クラスセレクター

特定の子要素を操作する場合、CSSは疑似クラスセレクターを提供して、選択プロセスを改善します。 疑似クラスセレクターは、セレクターの状態に関連する状態です。 このセクションでは、指定された、または指定されていない親要素の最初の子、つまり最初のネストされた要素である要素をターゲットにします。

開始するには、 index.html テキストエディタで。 次に、内部 <main> 要素、次のコードブロックから強調表示されたHTMLを追加します。

index.html
...
<main class="content-width">
  ...
  <section>
    <h2>First and Last Child Pseudo-Class Selector</h2>
    <ul>
      <li>Sugar plum gingerbread</li>
      <li>Sesame snaps sweet ice cream</li>
      <li>Jelly beans macaroon dessert</li>
      <li>Chocolate cheesecake</li>
      <li>Sweet roll pastry carrot cake</li>
      <li>Sugar plum tart cake</li>
      <li>Pudding soufflé</li>
      <li>Marshmallow oat cake</li>
    </ul>
  </section>
</main>

このHTMLは、で定義されているように、順序付けられていないリストを作成します。 <ul> 要素、8つのリスト項目(<li>)内部にネストされています。 これにより、ブラウザにデフォルトでコンテンツの箇条書きリストが作成されます。

これらの変更をに保存します index.html 次に開きます styles.css テキストエディタで。

CSSファイルに、 ul 要素セレクター。 このセクションでは、クラス関連のスコープは必要ありません。 次に、セレクターブロック内にプロパティを追加します list-style の値で none、箇条書きのスタイルを削除します。 をセットする margin プロパティに 1rem 0 そしてその padding プロパティに 0、ブラウザのデフォルトスタイルを上書きします。 次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css
...
.adjacent-sibling div + p {
  border-top: 1px solid red;
  padding-top: 1em;
}

ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 次の画像に示すように、順序付けされていないリストには箇条書きがなくなり、見出しのテキストに揃えられます。

次に、リストアイテムにデフォルトのスタイルを提供するために、 li 要素セレクター。 適用する padding 値が 0.5rem 0.75rem. 次に、薄緑色を追加します background-color とのプロパティ hsl(120, 50%, 95%) 値として。 最後に、 border プロパティをに設定 1pxsolid 少し濃い緑色で hsl(120, 50%, 80%)、次のコードブロックで強調表示されているように:

styles.css
...
ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

ul li {
  padding: 0.5rem 0.75rem;
  background-color: hsl(120, 50%, 95%);
  border: 1px solid hsl(120, 50%, 80%);
}

これらの変更をに保存します styles.css 開いて index.html ブラウザで。 各リストアイテムの背景色は薄緑色になり、境界線は濃い緑色になり、テキストは padding 財産。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

リストアイテムの上下の境界線は、アイテム間の境界線の太さを2倍にし、境界線の太さを不整合にします。 この状況に対処するには、 styles.css テキストエディタで。 次に、新しい隣接する兄弟コンビネータを追加して、 <li> 後に続く要素 <li> 内部の要素 <ul> 次のコードブロックに示されている要素:

styles.css
...
ul li {
  padding: 0.5rem 0.75rem;
  background-color: hsl(120, 50%, 95%);
  border: 1px solid hsl(120, 50%, 80%);
}

ul li + li {
  border-top: none;
}

その追加を保存します styles.css 更新します index.html ブラウザで。 リストアイテム間の余分な太い線は、別のリストアイテムの後に続くリストアイテムの上部から境界線を削除することで対処されています。 次の画像は、これがブラウザにどのように表示されるかを示しています。

さて、に戻ります styles.css 最初のリストアイテムの上部に丸みを帯びた角を適用します。 これは、順序付けされていないリストの最初のリストアイテムにのみ適用する必要があるため、子コンビネーターセレクターを使用できます。 これにより、順序付けされていないリストの最初の直接の子のみが選択されます。 後に li 要素セレクター、追加 :first-child すぐにスペースなし。 上部の丸みを帯びたコーナースタイルには、 border-radius 値がに設定されたプロパティ 0.75rem 0.75rem 0 0、これにより、左上隅と右上隅に丸みを帯びた角が追加されます。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css
...
ul li + li {
  border-top: none;
}

ul > li:first-child {
  border-radius: 0.75rem 0.75rem 0 0;
}

この変更をに保存します styles.css ブラウザに戻って更新します index.html. 順序付けされていないリストの最初のアイテムは、要素の上面に丸みを帯びた角になっています。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、リストのスタイルを作成し、最初の子に丸みを帯びた角を適用しました <li> の要素 <ul> 親要素。 次のセクションでは、スタイルを設定します <li> リストの最後に last-child 疑似クラスセレクター。

last-child 疑似クラスセレクター

同じように first-child 疑似クラスセレクターは、親の最初の要素である last-child 疑似クラスセレクターは、親要素の最後の要素をキャプチャします。 前のセクションでは、最初のリスト項目の上部に丸みを帯びた角を追加しました。 このセクションでは、最後のアイテムの下部に丸い角を追加します。

開始するには、に戻ります styles.css テキストエディタで。 のセレクターブロックの後 :first-child、同様にフォーマットされた子コンビネータを追加します :last-childli 要素セレクター。 セレクターブロックに、 border-radius プロパティ、次に値の使用 0 0 0.75rem 0.75rem. この値は、上位の値をに設定します 0 右下と左下の曲線の値は 0.75rem. 次のコードブロックで強調表示されているCSSは、これがどのように構成されているかを示しています。

styles.css
...
ul > li:first-child {
  border-radius: 0.75rem 0.75rem 0 0;
}

ul > li:last-child {
  border-radius: 0 0 0.75rem 0.75rem;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 順序付けされていないリスト全体が、角が同じ丸いボックスのようになります。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、 last-child 最後にスタイルを適用するための疑似クラス <li> 順序付けられていないリストの要素。 次のセクションでは、子要素が1つしかない場合のスタイルを記述します。

only-child 疑似クラスセレクター

変更または更新できるコンテンツにスタイルを適用する場合、子要素が1つしかない場合があります。 このような場合、要素は最初と最後の子の両方であるため、疑似クラスが互いのスタイルを上書きする可能性があります。 このシナリオでは、特に一人っ子シナリオ専用の別の疑似クラスセレクターがあります。

開始するには、 index.html テキストエディタで、次のコードブロックから強調表示されたHTMLを <main> 要素と前の後に <section> エレメント:

index.html
...
<main class="content-width">
  ...
  <section>
    <h2>Only Child Pseudo-Class Selector</h2>  
    <ul>
      <li>Sweet roll pastry carrot cake</li>
    </ul>
  </section>
</main>

変更をに保存します index.thml 次に、ブラウザに戻ってページを更新します。 ブラウザはを適用しています :first-child 上部の角は丸みを帯びていますが、 :last-child 丸みを帯びた角のプロパティは、最初のプロパティを上書きします。 これにより、単一のリストアイテムの上部に鋭い角があり、下部に丸い角があります。 次の画像は、コードのブラウザレンダリングを示しています。

テキストエディタに戻り、開きます styles.css. このシナリオに対処するには、 :only-child の疑似クラスセレクター li 子コンビネータの一部。 次に、 border-radius プロパティ、値を単一に設定します 0.75rem、4つのコーナーすべてにカーブを適用します。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css
...
ul > li:last-child {
  border-radius: 0 0  0.75rem 0.75rem;
}

ul > li:only-child {
  border-radius: 0.75rem;
}

これらの追加をに保存します styles.css、ブラウザに戻り、更新します index.html. 次の画像に示すように、単一のリストアイテムのすべての側面が丸みを帯びています。

このセクションでは、 only-child 単一にスタイルを適用するための疑似クラスセレクター <li> 順序付けられていないリストの要素。 次のセクションでは、疑似クラスセレクターを使用して、親内の数値カウントに基づいて特定の子要素にスタイルを適用します。

nth-child 疑似クラスセレクター

The nth-child 疑似クラスセレクターを使用すると、子要素を選択するためのパターンを設定できます。 他のセレクターは、属性値などの要素の特性を使用して、一致するHTML要素を検索します。 The nth-child 疑似クラスセレクターは、親内の指定された数値位置によってHTML要素をターゲットにします。 nth という用語は、一連の未確認の番号を指す数学的なフレーズです。 この特定のセレクターを使用すると、シーケンス内の偶数および奇数の子と特定の番号の要素を選択できます。

このセレクターのHTMLを設定するには、 index.html テキストエディタで。 次に、最後の後に次のコードブロックから強調表示された部分を追加します </section> 鬼ごっこ:

index.html
...
<main class="content-width">
  ...
  <section>
    <h2>Nth Child Pseudo-Class Selector</h2>
    <ol>
      <li>Caramel marshmallows</li>
      <li>Gummi bears</li>
      <li>pudding donut</li>
      <li>Chocolate bar</li>
      <li>Lemon drops</li>
      <li>Lollipop</li>
      <li>Danish soufflé</li>
    </ol>
  </section>
</main>

このコードは、によって定義された順序付きリストを設定します <ol> エレメント。 とは異なり <ul>、各リストアイテムに箇条書きを付けます。 <ol> 各アイテムに順番に番号を付けます。

これらの変更は必ずに保存してください index.html. その後、に戻ります styles.css テキストエディタで。 順序付きリストとリストアイテムに対して、調整済みのスタイルをいくつか設定します。 作成する ol 要素セレクター padding プロパティをに設定 0. 次に、 list-style-position の値を持つプロパティ inside; これにより、生成された番号が <li> 要素のボックスモデル。 最後に、 ol li 子孫コンビネータ padding プロパティをに設定 0.25rem. これをどのように記述するかについては、次のコードブロックの強調表示されたCSSを参照してください。

styles.css
...
ul > li:only-child {
  border-radius: 0.75rem;
}

ol {
  padding: 0;
  list-style-position: inside;
}

ol li {
  padding: 0.25rem;
}

変更をに保存します styles.css、次にWebブラウザを開き、 index.html ファイル。 次の画像に示すように、新しいセクションは7つのアイテムのリストでレンダリングされ、それぞれがシーケンス内の数値で始まります。

での作業を開始するには nth-child 疑似クラス、に戻る styles.css テキストエディタで。 セレクターは前の疑似クラスと同じように設定されていますが、最後に括弧が付いています。 この括弧には、要素を選択するための単語値または数値が含まれています。 すべての偶数番号のリスト項目を選択するには、次の子孫コンビネータを作成します olli. それから加えて :nth-child() 括弧内に単語を追加します even. セレクターブロックで、 background-color プロパティに aliceblue、次のコードブロックで強調表示されているように:

styles.css
...
ol li {
  padding: 0.25rem;
}

ol li:nth-child(even) {
  background-color: aliceblue;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 リストの2番目、4番目、6番目のアイテムの背景が水色になりました。 これは、ゼブラストライプと呼ばれるスタイルを作成する方法です。これは、情報の長いリストで読みやすくなります。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

次に、に戻ります styles.css テキストエディタで、奇数のリストアイテムに対して同じことを行います。 を使用して別の子孫コンビネータを作成します :nth-child() 疑似クラスセレクター。 今回は、括弧内に単語の値を追加します odd. 次に、セレクターブロックで background-color プロパティに lavenderblush、淡いピンク色。 次の強調表示されたコードは、これを設定する方法を示しています。

styles.css
...
ol li:nth-child(even) {
  background-color: aliceblue;
}

ol li:nth-child(odd) {
  background-color: lavenderblush;
}

その変更をに保存します styles.css とリロード index.html ブラウザで。 リストが交互に表示されるようになりました lavenderblushaliceblue、1番目、3番目、5番目、および7番目のリストアイテムに新しい色が表示されます。 次の画像は、これがどのように表示されるかを示しています。

最後に、単語値の代わりに数値を挿入できます。 戻る styles.css そして別のものを追加します ol li:nth-child() セレクター、今回は 4 括弧内。 これにより、リストの4番目の項目が選択されます。 そのアイテムを目立たせるには、 color プロパティをに設定 whitebackground-color プロパティをに設定 indigo、次のコードブロックで強調表示されているように:

styles.css
...
ol li:nth-child(odd) {
  background-color: lavenderblush;
}

ol li:nth-child(4) {
  color: white;
  background-color: indigo;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 奇数と偶数のアイテムは交互のゼブラストライプスタイルを保持しますが、4番目のアイテムの背景は紫色でテキストは白になっています。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

注: :nth-child() 疑似クラスは、次のような代数方程式も使用できます。 3n リスト内の3つおきのアイテムを選択します。 CSS Tricksには、n番目の子の値をテストするn番目の子のテストツールがあり、この疑似クラスセレクターの複雑な多様性を理解するのに役立ちます。

この最後のセクションでは、 :nth-child() 偶数番号の要素、奇数番号の要素、特にリストの4番目の要素にスタイルを適用するための疑似クラスセレクター。

結論

このチュートリアルでは、関係の概念に基づいた多くの新しいセレクターを使用しました。 子孫コンビネーターと子コンビネーターセレクターを使用して、他の要素内の要素を選択しました。 次に、一般的な兄弟コンビネーターと隣接する兄弟コンビネーターを使用して、親が共有されている要素を選択し、近接度に基づいてスタイルを適用しました。 最後に、一連の疑似クラスセレクターを使用して、最初、最後、および唯一の子要素と、その間のn番目ごとの要素のスタイルを設定しました。 これらのセレクターは、プロジェクトのスタイルを磨き、範囲を広げるのに役立ちます。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。