:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。

HTML&CSS

:nth-child練習ページjQueryセレクタ練習ページを作成しました。

スポンサーリンク

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

:nth-child練習ページ

Lesson1

lesson0003
li要素を10個用意しています。
各li要素はflexBoxで横並びにしています。
ピンクの背景色の1から10までが初期表示状態です。
: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

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

lesson0001
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>
タイトルとURLをコピーしました