リレーションシップを使用してCSSでHTML要素を選択する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
セレクターは、WebブラウザーがCSSを介して特定のスタイルを検索して要素に適用するために使用するものです。 これらのスタイルは、同じ種類の多くの要素を選択するタイプセレクターを使用して広く適用できます。 idやclassなどの要素の特定の属性をターゲットにすることに加えて、別の要素との関係または近接性に基づいて要素を選択することができます。 たとえば、前の要素またはシリーズの最初の要素に続くHTML要素を選択できます。
このチュートリアルでは、CSS関係に基づくいくつかのアプローチを使用して、HTMLページの要素を選択してスタイルを設定します。 リレーションシップセレクターごとに異なるスタイルシナリオでコンテンツのページを作成します。 first-、last-、only-、nth-childに加えて、子孫コンビネーター、子コンビネーター、一般兄弟コンビネーター、隣接兄弟コンビネーターを使用します。 ]疑似クラスセレクター。 これらのセレクターは、従来のセレクターの直接的な方法とは対照的に、周囲の要素の相対的な条件に基づいてスタイルを適用します。
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- ローカルマシンに
index.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。
初期HTMLとCSSの設定
まず、チュートリアルの残りの部分で作業するHTMLおよびCSSコードを設定します。
テキストエディタでindex.htmlを開くことから始めます。 次に、次のHTMLをファイルに追加します。
index.html
<!doctype html> <html> <head> </head> <body> </body> </html>
次に、<head>タグに移動し、<meta>タグを追加して、HTMLファイルの文字セットを定義します。 次に、ページのタイトルを設定し、モバイルデバイスがページをレンダリングする方法を定義する<meta>タグを追加し、最後に<link>タグを使用して後で作成するCSSファイルをロードします。 これらの追加は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。
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に保存してください。 <h1>要素は、ページのタイトルを表示します。 class属性がcontent-widthの<main>要素には、チュートリアル全体で追加するページのコンテンツが含まれます。
次に、index.htmlファイルと同じディレクトリにstyles.cssという名前の新しいファイルを作成し、テキストエディタで新しいファイルを開きます。 このファイルは、ブラウザが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-familyおよびcolor値の新しいデフォルトを定義します。 .content-widthクラスセレクターは、ページの幅の90 % o fに設定され、現在のfont-sizeの最大幅70文字の幅に拡大します。 70文字は、テキスト行の理想的な最大長です。 .content-widthプロパティのmarginは、要素の上下のスペースを維持し、コンテナを水平方向の中央に維持します。 このページにはいくつかの<section>要素があるため、sectionタイプセレクターはmarginを適用して、各グループ間に十分なスペースを与えます。 最後に、h1およびh2タイプセレクターは、<h1>コンテンツを中央に設定し、<h2>コンテンツの色をmediumblueに設定します。 。
このセクションでは、HTMLファイルとCSSファイルの開始点を設定します。 次のセクションでは、index.htmlにコンテンツを追加してから、子孫コンビネーターを使用してCSSでスタイルを適用します。
子孫コンビネーター
リレーションシップベースのセレクターを使用する場合、親、子、祖先、この場合は子孫などの家族用語に出くわします。 。 子孫コンビネーターは、特定の祖先を持つ要素にスタイルを適用するために、HTML構造に一致するセレクターのスペースで区切られたリストです。 リストの最後のセレクターはスタイルを受け取るセレクターであり、リストの前のセレクターの子孫です。
子孫コンビネーターは、スタイルをスコープにする最も簡単な方法です。 スコープは、セレクターの特異性を高めるために追加の詳細を提供する方法です。 子孫コンビネーターは、セレクターの前に祖先セレクターを追加することにより、スコーピングを支援します。 たとえば、aタイプのセレクターは、ページ上のすべての<a>タグを取得しますが、header aの子孫セレクターは、内部の<a>タグのみを選択します。 <header>要素。
子孫コンビネータの使用を開始するには、テキストエディタでindex.htmlを開きます。 descendantのclass属性を持つ<section>要素を作成します。 <section>要素内に、Descendant Combinator Selectorを含む<h2>要素を追加し、次に2つの<p>要素を追加して、カップケーキイプサムのコンテンツを入力します。 ]。 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タイプセレクターの順に追加します。 これにより、descendantを含むclass属性を持つ要素内にあるblockquote要素にのみスタイルを適用するセレクターが作成されます。 次のコードブロックで強調表示されている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の実線とbackground-colorプロパティが適用されたlavenderの背景が作成されます。 次のスクリーンショットは、このコードがブラウザーでどのようにレンダリングされるかを示しています。
HTMLの祖先セレクターとの相対的な深さに関係なく、子孫コンビネーターセレクターを子孫要素に適用することもできます。 前のコードセットが.descendantクラスセレクター内の<blockquote>要素にスタイルを設定する方法と同様に、次に、要素に関係なく、すべての<p>要素にスタイルを適用します。に含まれた。
テキストエディタでstyles.cssファイルに戻ります。 次に、.descendantの祖先を持つp要素セレクターの新しい子孫コンビネーターセレクターを追加します。 セレクターブロック内で、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つが<blockquote>要素内にあるにもかかわらず、両方の<p>要素のテキスト行が大きくなりました。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
最後に、テキストエディタでstyles.cssファイルに戻ります。 <blockquote>要素内の<p>要素に直接スタイルを適用するために、新しい子孫セレクターを作成します。 .descendant blockquote pを書き出すことから始めます。これにより、<blockquote>要素内のどこかにあるページ上の<p>要素を見つけるようにブラウザに指示されます。 descendantのclass属性。 次に、セレクターブロックで、1.25remに設定されたfont-sizeプロパティと、#222を値として持つcolorプロパティを追加します。 次のコードブロックで強調表示されているCSSは、必要な構造を示しています。
styles.css
...
.descendant p {
line-height: 1.5;
}
.descendant blockquote p {
font-size: 1.25rem;
color: #222;
}
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 次の画像に示すように、<blockquote>内の<p>要素のコンテンツのfont-sizeは、はるかに大きくなり、わずかに柔らかい灰色になります。
このセクションでは、子孫コンビネーターセレクターを使用して、スタイルを適用するために別の要素の内部にある要素にスタイルをスコープしました。 次のセクションでは、子コンビネーターセレクターを使用して、要素の第1レベルの子のみを選択します。
チャイルドコンビネーターセレクター
スタイルをスコーピングする場合、祖先セレクター内のすべての要素ではなく、要素のすぐ内側にある要素だけが必要な場合があります。 たとえば、サブナビゲーション要素に含まれているリンクではなく、ナビゲーションバーのすべてのトップレベルリンクのスタイルを設定したい場合があります。 特定の親の子のみをスタイリングする必要があるこれらの瞬間には、子コンビネーターセレクターを使用できます。
この新しいセレクターを使用する前に、テキストエディターでindex.htmlに戻り、<main>要素内で、前の<section>要素の後に次のコードブロックから強調表示されたHTMLを追加します。
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プロパティで拡張して、<section>内にある<p>要素をchildクラスに含めます。 。 複数のセレクターが同じスタイルを共有できるようにする一般的なコンビネーターを使用して達成します。 スタイルを適用するには、各セレクターの間にコンマが必要です。 次の強調表示されたコードに示すように、.descendant pセレクターの後にコンマを追加してから、.child p子孫コンビネーターを追加します。
styles.css
...
.descendant p,
.child p {
line-height: 1.5;
}
...
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 新しいセクションのコンテンツでは、テキストの各行の間に大きなスペースができます。 次の画像は、これがブラウザにどのように表示されるかを示しています。
次に、<section class="child">要素の直接の子である<p>要素のみを選択するには、子コンビネーターセレクターを使用します。 これは、親セレクター、大なり記号（>）、子セレクターの順に書き込むことで構成されます。
テキストエディタで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色に設定されたテキストを持っています。 2番目の<p>要素をラップする<div>要素は、<section>要素との関係を子から孫に変更します。 このため、その<p>要素は子コンビネーターセレクターには無効です。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
このセクションでは、子コンビネーターセレクターを使用して、スタイルを選択し、親要素の直接の子に適用しました。 次のセクションでは、兄弟要素の関係を操作して、要素に共通の親がある場合に要素にスタイルを適用します。
兄弟コンビネーターセレクター
一般的な兄弟コンビネーターは、特定の要素の後にあり、同じ親要素を持つが、互いに隣接していない可能性がある要素にスタイリングをスコープする方法を提供します。 多くの場合、これは、動的に生成されたコンテンツなど、HTMLは一般的に知られているが、予測できない場合に発生します。
まず、セレクターを使用するにはHTML兄弟が必要です。 テキストエディタでindex.htmlに戻ります。 次に、</main>タグを閉じる前に、次のコードブロックから強調表示されたHTMLを追加します。
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プロパティを使用してグループ化セレクターを拡張し、<section>内にある<p>要素をgeneral-siblingクラスに含めます。 繰り返しますが、これは、次の強調表示されたCSSに示すように、.child pセレクターの後にコンマを追加し、.general-sibling p子孫コンビネーターを追加することによって実現されます。
styles.css
...
.descendant p,
.child p,
.general-sibling p {
line-height: 1.5;
}
...
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新します。 新しいセクションのコンテンツでは、テキストの各行の間に大きなスペースができます。 次の画像は、これがブラウザにどのように表示されるかを示しています。
次に、同じ親の別の<p>要素の後に続く兄弟<p>要素のスタイルを記述します。 これは、セレクター、チルダ（~）、スタイルを設定する兄弟のセレクターを作成することによって行われます。
テキストエディタでstyles.cssに戻り、.general-sibling pの新しいセレクタを追加します。 これにより、general-siblingを持つclass属性を持つ親を持つ<p>要素が検索されます。 次に、チルダ記号に続いてp要素セレクターを追加します。 次のコードブロックの強調表示されたCSSに示すように、セレクターブロック内で、colorプロパティをlightseagreenの名前付き値に設定します。
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;
}
このスタイルは、<section class="adjacent-sibling">要素内の<p>要素にのみ適用する必要があるため、最初のセレクターは子孫コンビネーターを使用する必要があります。 セレクターの2番目の要素は、兄弟に隣接する要素であるため、要素セレクターを使用するだけで済みます。
注：兄弟セレクターを操作するときは、シーケンスの最後のセレクターが選択された要素であることを覚えておくことが重要です。 隣接する兄弟コンビネータが.adjacent-sibling p + .adjacent-sibling pと記述されているとします。 このコードの目的は、.adjacent-siblingの祖先内の<p>の後に<p>を選択することである可能性があります。 ただし、代わりに、この隣接する兄弟セレクターは、<p>兄弟の直後にある.adjacent-siblingの祖先（別の要素の子孫）内の<p>をターゲットにしようとします。 adjacent-siblingのclassを使用します。
変更内容を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を開きます。 <div>要素が<p>要素の隣にあるため、2番目と3番目の段落の間に赤い線が表示されます。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
このセクションでは、隣接する兄弟コンビネーターを使用して、兄弟要素の直後の要素にスタイルを適用しました。 次のセクションでは、最初の子疑似クラスを使用して、親の最初の要素にスタイルを適用します。
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の値で適用します。 次に、hsl(120, 50%, 95%)を値として、薄緑色のbackground-colorプロパティを追加します。 最後に、次のコードブロックで強調表示されているように、hsl(120, 50%, 80%)を使用して、1pxおよびsolidに設定されたborderプロパティを少し濃い緑色で追加します。
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に戻ります。 次に、次のコードブロックに示すように、新しい隣接する兄弟コンビネーターを追加して、<ul>要素内の<li>要素の後に続く<li>要素を選択します。
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を更新します。 順序付けされていないリストの最初のアイテムは、要素の上面に丸みを帯びた角になっています。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。
このセクションでは、リストのスタイルを作成し、<ul>親要素の最初の子<li>要素に丸みを帯びた角を適用しました。 次のセクションでは、last-child疑似クラスセレクターを使用して、リストの最後にある<li>のスタイルを設定します。
last-child疑似クラスセレクター
first-child疑似クラスセレクターが親の最初の要素をキャプチャするのと同じように、last-child疑似クラスセレクターは親要素の最後の要素をキャプチャします。 前のセクションでは、最初のリスト項目の上部に丸みを帯びた角を追加しました。 このセクションでは、最後のアイテムの下部に丸い角を追加します。
まず、テキストエディタでstyles.cssに戻ります。 :first-childのセレクターブロックの後に、li要素セレクターに:last-childを含む同様の形式の子コンビネーターを追加します。 セレクターブロックに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を開き、<main>要素内で、前の<section>要素の後に次のコードブロックから強調表示されたHTMLを追加します。
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を開きます。 このシナリオに対処するには、子コンビネーターのli部分で:only-child疑似クラスセレクターを使用します。 次に、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疑似クラスセレクター
nth-child疑似クラスセレクターを使用すると、子要素を選択するためのパターンを設定できます。 他のセレクターは、属性値などの要素の特性を使用して、一致するHTML要素を検索します。 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に戻ります。 順序付きリストとリストアイテムに対して、調整済みのスタイルをいくつか設定します。 paddingプロパティを0に設定して、ol要素セレクターを作成します。 次に、insideの値を持つlist-style-positionプロパティを追加します。 これにより、生成された番号が<li>要素のボックスモデル内に移動します。 最後に、paddingプロパティが0.25remに設定されたol li子孫コンビネーターを作成します。 これをどのように記述するかについては、次のコードブロックの強調表示された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に戻ります。 セレクターは前の疑似クラスと同じように設定されていますが、最後に括弧が付いています。 この括弧には、要素を選択するための単語値または数値が含まれています。 偶数番号のリストアイテムをすべて選択するには、olおよびliの子孫コンビネーターを作成します。 次に、: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をリロードします。 リストはlavenderblushとaliceblueの間で交互に表示され、1番目、3番目、5番目、7番目のリストアイテムに新しい色が付けられます。 次の画像は、これがどのように表示されるかを示しています。
最後に、単語値の代わりに数値を挿入できます。 styles.cssに戻り、別のol li:nth-child()セレクターを追加します。今回は、括弧内に4を付けます。 これにより、リストの4番目の項目が選択されます。 そのアイテムを目立たせるには、次のコードブロックで強調表示されているように、colorプロパティをwhiteに設定し、background-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のスタイルを設定する方法の他のチュートリアルを試してください。
