コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ソース上の順序
このレッスンでは、 ソース上の順序で 優先度が変わるということを、 具体的な例で確かめてみたいと思います。 優先度の決まり方というのは 3つありまして、 まず「重要度」が最優先。 !important構文ですね。 次に、どれほどセレクタが具体的かという 「厳密度」があって、 それが同じときには、 「あとのソース」のほうが「優先される」と いうことになるわけです。 ここにあるのは、テスト用のli要素です。 このli要素で試してみたいと思います。 まずは、li要素にスタイルを与えましょう。 li で color: blue とします。 ひとつしかありませんけれども、 この要素ですね。 がブルーに変わるはずです。 保存して確かめます。 ひとつだけのli要素が、 文字がブルーに変わりました。 次に、同じli要素に 競合するカラーの指定を加えましょう。 li なんですけれども、 ここに擬似クラスで first-child というふうにします。 そうすると最初の要素が 選択されるんですが、 最初も何もひとつしかありませんね。 これが選択されますね。 そして、それに対しては、 color: green にしましょう。 擬似クラスがついていますから、 先に書いていますけれども、 それでもこちらのほうが 優先されるということになるわけですね。 確認します。 ファイルを保存します。 疑似クラスを定めて厳密度が上がったので、 緑の指定が優先されています。 では、さらに競合する 同じ厳密度の指定を加えます。 li要素で、 li要素で last-child ということで、 要素がひとつだけですので、 last も first も同じになるんですね。 ここで color を、では red としましょう。 これで確かめてみます。 ファイルを保存します。 擬似クラスで厳密度が 同じになりましたから、 後に書いたほうが優先ということで、 赤い文字色になりました。 このレッスンでは、 スタイルのソース上の順序と優先度 についてご説明しました。 重要度と厳密度が同じときの場合ですね。 そのときは、後のほうのソースが 優先されるということで、 厳密度が疑似クラスで同じだった場合には、 こちらの赤が優先されたということです。
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。