CSS3の基本 - レベルアップCSS

構造疑似クラス -of-type系疑似クラス編

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
最初や最後の要素、1つおきの要素など、特定の要素を同じ要素から選んでスタイルを付加するときは、構造疑似クラスの:~-of-type系疑似クラスを使用します。ここでは、:~-of-type系疑似クラスの使い方について紹介します。
講師:
04:25

字幕

最初や最後の要素、1つ置きの要素など特定の要素を同じ要素から選んでスタイルを適用するときは構造疑似クラスの of-type 系疑似クラスを使用します。このレッスンでは of-type 系疑似クラスの使い方について紹介します。画面では左側に HTML と CSS の編集画面。右側にその表示結果を表示するウェブブラウザを表示しています。HTML を確認してみましょう。HTML にはメイン要素の中にh2 要素と p 要素が交互にマークアップされています。このような階層構造に対して例えばnth-child 疑似クラスを使って奇数の h2 要素に対して背景色を山吹色に設定しています。このときウェブブラウザのレンダリング結果では奇数の h2 要素つまり1番目、3番目、5番目のh2 要素に対して背景色が適用されてほしいのですがnth-child 疑似クラスを使っているとなぜかこのようにすべての h2 要素に対して背景色が適用されてしまっています。これは nth-child 疑似クラスが同じ階層の要素を1つのグループとして捉えその要素の中から指定された順番の要素を抽出しているからです。この構造では h2 と p 要素が交互に入っているため奇数 偶数 奇数 偶数 奇数 偶数といったように判定されており h2 要素はすべて奇数として扱われています。 このようなとき HTML の構造を変更せずに奇数の h2 要素にだけスタイルを適用したい場合はof-type 系の疑似クラスを指定します。of-type 系の疑似クラスはchild 系疑似クラスと対応するように疑似クラスが用意されておりご覧のような疑似クラスが使用できます。ここではこの中から nth-of-type 疑似クラスを使って奇数の h2 要素に対して背景色を適用するということをやってみましょう。一旦元々のスタイルに関してはコメントアウトをしておきます。それでは nth-of-type 疑似クラスを使います。h2 要素に対してnth-of-type 疑似クラスを使います。そして指定するのは奇数です。この奇数の項目に対して背景色を先ほどと同様に山吹色に設定します。すると先ほどと似たような書式ではありますがof-type 系疑似クラスを使うことで同じ階層に p 要素があってもh2 要素にだけ奇数か偶数かという判定を適用することができ1番目、3番目、5番目の h2 要素に背景色が適用されています。同様に偶数についても指定してみましょう。同じく h2 要素に対して nth-of-type疑似クラスを使って今度は偶数を指定するので even を使います。 そして背景色には区別がつきやすいようにエメラルドグリーンを指定します。ウェブブラウザを見ると奇数に山吹色、偶数にエメラルドグリーンが適用できていることを確認できます。このレッスンでは最初や最後の要素、1つ置きの要素など特定の要素を同じ要素から選んでスタイルを適用するときに使うof-type 系疑似クラスの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。