:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。 | IT工房｜AI入門とWeb開発

:nth-child練習ページの使い方

Lesson1

li要素を10個用意しています。
各li要素はflexBoxで横並びにしています。
ピンクの背景色の１から１０までが初期表示状態です。
:nth-child()の括弧の中がテキスト入力ボックスになっていますので、数値またはnやn+1などを入力してすぐ下の結果ボタンをクリックすることにより、対象のli要素の背景色がマリンブルーに変更されます。特にnやn+1や2nや2n+1など色々確認することができます。
:nth-child()の括弧の中の数値の使い方の練習に使ってください。

Lesson1 HTMLコード

<ul class="lesson">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
</ul>

Lesson2

基本的な考え方はLesson1と同様です。違うのは単純にliが10個並ぶのではなく、違う要素だったり、入れ子状態を作って複雑にしています。
:nth-child()の括弧の中の数値が思ったとおりの結果になるか試してみてください。
特に括弧内に「2」あるいは「３」を入れたときの挙動が理解できるようにしっかりと学習してください。
＊参考：「:nth-child()の使い方を極める」のページ

<div class="lesson">
        <p>1</p>
        <p>2</p>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7        
            <div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </div>
        </div>
</div>

jQueryセレクタ練習ページの使い方

jQueryセレクタ練習ページ
こちらはjQueryのセレクタを練習するものです。実質的にはCSSのセレクタの練習になります。
各種セレクタで下記HTMLコードのどれかの要素を特定することで、「結果」ボタンをクリックすることで動的に背景色がマリンブルーになります。
さまざまなセレクタを使用してみて、思い通りになるか試してみましょう。
特に、「+」や「~」、「>」などの使い方をしっかりと覚えておきましょう。

HTMLコード

<ul class="lesson">
        <li id="first" class="first">1</li>
        <li id="second" class="second">2</li>
        <li id="third" class="third">3</li>
        <li id="fourth" class="fourth">4</li>
        <li id="fifth" class="fifth">5
            <ul>
                <li id="sixth" class="sixth">6</li>
                <li id="seventh" class="seventh">7</li>
                <li id="eighth" class="eighth">8</li>
                <li id="ninth" class="ninth">9</li>
                <li id="tenth" class="tentn">10</li>
            </ul>
        </li>
</ul>