CSS 3セレクタ【1】
セレクタの概要
セレクタはCSS 3における重要な内容である.これにより、開発者がスタイルシートを作成または変更する際の作業効率が大幅に向上します.CSS 3では,セレクタを用いてスタイルと要素を直接バインドすることが提唱されているが,これにより,スタイルテーブルにおいてどのようなスタイルがどのような要素と一致するかが一目瞭然になり,修正も容易になる.それだけでなく,セレクタにより,様々な複雑な指定を実現するとともに,スタイルシートのコード書き込み量を大幅に減らすことができ,最終的に書かれたスタイルシートも簡潔明瞭になる.
CSS 3における属性セレクタ[attr=val]プロパティセレクタは、要素がattrで表されるプロパティのプロパティ値がvalで指定された文字である場合、このスタイルを使用することを意味します. [attr*=val]プロパティセレクタは、要素がattrで表されるプロパティのプロパティ値にvalで指定された文字が含まれている場合、このスタイルを使用することを意味します. [attr^=val]プロパティセレクタは、要素がattrで表されるプロパティのプロパティ値がvalで指定された文字で始まる場合、このスタイルを使用することを意味します. [attr$=val]プロパティセレクタは、要素がattrで表されるプロパティのプロパティ値がvalで指定された文字で終わる場合、このスタイルを使用することを意味します.
コンストラクション擬似クラスセレクタ
CSSにおける擬似クラスセレクタ
擬似クラスセレクタとクラスセレクタの違いは、クラスセレクタは任意に名前を付けることができるが、擬似クラスセレクタはCSSで定義されたセレクタであり、任意に名前を付けることはできない.CSSで最もよく使用される擬似クラスセレクタは、a(アンカー)要素に使用されるいくつかのセレクタであり、使用方法は以下の通りである.
CSSにおける擬似要素セレクタ
擬似エレメントセレクタとは、真のエレメントに対して使用されるセレクタではなく、CSSで定義された擬似エレメントに対して使用されるセレクタのことです.CSSには主に以下の4種類の擬似要素セレクタがあります. first-line擬似要素セレクタ:ある要素の最初の行の文字にスタイルを使用します. first-letter擬似要素セレクタ:ある要素の文字の頭文字(欧米文字)または最初の文字にスタイルを使用するために使用される; before擬似要素セレクタ:ある要素の前にいくつかの内容を挿入するために使用されます. after擬似要素セレクタ:ある要素の後にいくつかの内容を挿入するために使用されます.
構造的な擬似クラスセレクタの共通の特徴は、開発者がドキュメントツリーの構造に基づいて要素のスタイルを指定できることです.
セレクタroot、not、empty、target
rootセレクタは、スタイルをページのルート要素にバインドします.ルート要素とは、ドキュメントツリーの最上位構造にある要素を指し、HTMLページではページ全体を含む部分を指す.また、root要素とbody要素の背景をスタイルで指定する場合、指定条件によって背景色の表示範囲が変化することに注意してください.
構造要素にスタイルを使用したい場合、この構造要素の下にあるサブ構造要素を除外して、このスタイルを使用しないようにするには、notセレクタを使用します.たとえば、「body*」を使用してbody要素の背景色を黄色に指定できますが、h 1要素を除外してこの背景色を使用すると、CSSスタイルは次のように定義されます.
emptyセレクタを使用して、要素の内容が空白の場合に使用するスタイルを指定します.
targetセレクタを使用して、ページ内のあるtarget要素(その要素のidはページ内のハイパーリンクとして使用される)にスタイルを指定します.このスタイルは、ユーザーがページ内のハイパーリンクをクリックし、target要素にジャンプした後にのみ機能します.
セレクタfirst-child、last-child、nth-child、nth-last-child
これらのセレクタは、1つの親要素の最初のサブ要素、最後のサブ要素、指定したシーケンス番号のサブ要素、偶数または奇数のサブ要素に対して特にスタイルの指定を行うことができます.
最初のサブエレメント、最後のサブエレメントを個別に指定するスタイル
指定したシーケンス番号のサブ要素のスタイルの使用
nth-childセレクタとnth-last-childセレクタを使用すると、親要素の最初のサブ要素と最後のサブ要素のスタイルを指定するだけでなく、親要素の番号を指定するサブ要素に対してスタイルを指定できます.使用方法は次のとおりです.
この例では、ulリストの2番目のliリスト項目の背景色を黄色、最後から2番目のliリスト項目の背景色を水色に指定します.
すべての奇数または偶数要素にスタイルを使用
この2つのセレクタは、親要素のすべての奇数(odd)または偶数(even)サブ要素に対してスタイルを使用するためにも使用できます.使用方法は以下のとおりです.
注:nth-childセレクタとnth-last-childセレクタは、親要素のすべてのサブ要素の配列についてシーケンス番号を計算します.つまり、親要素に1つ以上のサブ要素が含まれている可能性がある場合、あるサブ要素を奇数偶数要素でスタイル指定する場合は、次の2つの選択を使用します.
セレクタnth-of-typeとnth-last-of-type
CSS 3では、これら2つのセレクタを用いて上述した注意事項で説明した問題を解決することができる.この2つのセレクタを使用する場合、CSS 3は、サブエレメントが奇数または偶数である場合には、同じタイプのサブエレメントのみを計算し、以下のように使用します.
また,奇数偶数を計算する際に下から上へ逆算して計算する必要がある場合はnth-last-typeセレクタを用いて計算する.
スタイルのループ
開発者がすべてのリスト項目に背景色を設定したいが、リスト項目ごとに指定する方式ではなく、ループ指定方式を採用し、残りのリスト項目を最初から指定した背景色にループさせたい場合は、nth-childセレクタを採用し、「nth-child(xn+y)」の形式を使用すればよい.ここで、「x」は、ループごとにいくつかのスタイルが含まれていることを示し、「y」は、指定したスタイルがループ内に位置する位置を示し、使用方法は以下の通りである.
なお、「4 n+4」の表記は、「4 n」と略すことができる.上記の4つのセレクタは、このアプリケーションをサポートしています.
only-childとonly-of-typeセレクタ
nth-childとnth-last-childセレクタを次のように組み合わせて使用すると、親要素にサブ要素が1つしかない場合に使用するスタイルを指定できます.
上記の例のCSSスタイルは、次のように変更できます.
さらに、only-of-typeセレクタを使用して、「nth-of-type(1):nth-last-of-type(1)」という2つのセレクタ式フォーマットを組み合わせて、スタイルが一意のサブ要素にのみ機能するようにする方法も使用できます.
セレクタはCSS 3における重要な内容である.これにより、開発者がスタイルシートを作成または変更する際の作業効率が大幅に向上します.CSS 3では,セレクタを用いてスタイルと要素を直接バインドすることが提唱されているが,これにより,スタイルテーブルにおいてどのようなスタイルがどのような要素と一致するかが一目瞭然になり,修正も容易になる.それだけでなく,セレクタにより,様々な複雑な指定を実現するとともに,スタイルシートのコード書き込み量を大幅に減らすことができ,最終的に書かれたスタイルシートも簡潔明瞭になる.
CSS 3における属性セレクタ
コンストラクション擬似クラスセレクタ
CSSにおける擬似クラスセレクタ
擬似クラスセレクタとクラスセレクタの違いは、クラスセレクタは任意に名前を付けることができるが、擬似クラスセレクタはCSSで定義されたセレクタであり、任意に名前を付けることはできない.CSSで最もよく使用される擬似クラスセレクタは、a(アンカー)要素に使用されるいくつかのセレクタであり、使用方法は以下の通りである.
a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#00FF00; text-decoration:none;}
a:hover {color:#FF00FF; text-decoration:underline;}
a:active {color:#0000FF; text-decoration:underline;}CSSにおける擬似要素セレクタ
擬似エレメントセレクタとは、真のエレメントに対して使用されるセレクタではなく、CSSで定義された擬似エレメントに対して使用されるセレクタのことです.CSSには主に以下の4種類の擬似要素セレクタがあります.
構造的な擬似クラスセレクタの共通の特徴は、開発者がドキュメントツリーの構造に基づいて要素のスタイルを指定できることです.
セレクタroot、not、empty、target
rootセレクタは、スタイルをページのルート要素にバインドします.ルート要素とは、ドキュメントツリーの最上位構造にある要素を指し、HTMLページではページ全体を含む部分を指す.また、root要素とbody要素の背景をスタイルで指定する場合、指定条件によって背景色の表示範囲が変化することに注意してください.
構造要素にスタイルを使用したい場合、この構造要素の下にあるサブ構造要素を除外して、このスタイルを使用しないようにするには、notセレクタを使用します.たとえば、「body*」を使用してbody要素の背景色を黄色に指定できますが、h 1要素を除外してこの背景色を使用すると、CSSスタイルは次のように定義されます.
<style type="text/css">
:root {background-color:yellow;}
body *:not(h1) {background-color:yellow;}
:empty {background-color:red;}
:target {background-color:green;}
</style>emptyセレクタを使用して、要素の内容が空白の場合に使用するスタイルを指定します.
targetセレクタを使用して、ページ内のあるtarget要素(その要素のidはページ内のハイパーリンクとして使用される)にスタイルを指定します.このスタイルは、ユーザーがページ内のハイパーリンクをクリックし、target要素にジャンプした後にのみ機能します.
セレクタfirst-child、last-child、nth-child、nth-last-child
これらのセレクタは、1つの親要素の最初のサブ要素、最後のサブ要素、指定したシーケンス番号のサブ要素、偶数または奇数のサブ要素に対して特にスタイルの指定を行うことができます.
最初のサブエレメント、最後のサブエレメントを個別に指定するスタイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>first-child last-child </title>
<style type="text/css">
li:first-child {background-color: yellow;}
li:last-child {background-color: skyblue;}
</style>
</head>
<body>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</body>
</html>指定したシーケンス番号のサブ要素のスタイルの使用
nth-childセレクタとnth-last-childセレクタを使用すると、親要素の最初のサブ要素と最後のサブ要素のスタイルを指定するだけでなく、親要素の番号を指定するサブ要素に対してスタイルを指定できます.使用方法は次のとおりです.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>nth-child nth-last-child </title>
<style type="text/css">
li:nth-child(2) {background-color: yellow;}
li:nth-last-child(2) {background-color: skyblue;}
</style>
</head>
<body>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</body>
</html>この例では、ulリストの2番目のliリスト項目の背景色を黄色、最後から2番目のliリスト項目の背景色を水色に指定します.
すべての奇数または偶数要素にスタイルを使用
この2つのセレクタは、親要素のすべての奇数(odd)または偶数(even)サブ要素に対してスタイルを使用するためにも使用できます.使用方法は以下のとおりです.
<style type="text/css">
li:nth-child(odd) {background-color: yellow;}
li:nth-child(even) {background-color: skyblue;}
</style>
注:nth-childセレクタとnth-last-childセレクタは、親要素のすべてのサブ要素の配列についてシーケンス番号を計算します.つまり、親要素に1つ以上のサブ要素が含まれている可能性がある場合、あるサブ要素を奇数偶数要素でスタイル指定する場合は、次の2つの選択を使用します.
セレクタnth-of-typeとnth-last-of-type
CSS 3では、これら2つのセレクタを用いて上述した注意事項で説明した問題を解決することができる.この2つのセレクタを使用する場合、CSS 3は、サブエレメントが奇数または偶数である場合には、同じタイプのサブエレメントのみを計算し、以下のように使用します.
<style type="text/css">
h2:nth-of-type(odd) {background-color: yellow;}
h2:nth-of-type(even) {background-color: skyblue;}
</style>また,奇数偶数を計算する際に下から上へ逆算して計算する必要がある場合はnth-last-typeセレクタを用いて計算する.
スタイルのループ
開発者がすべてのリスト項目に背景色を設定したいが、リスト項目ごとに指定する方式ではなく、ループ指定方式を採用し、残りのリスト項目を最初から指定した背景色にループさせたい場合は、nth-childセレクタを採用し、「nth-child(xn+y)」の形式を使用すればよい.ここで、「x」は、ループごとにいくつかのスタイルが含まれていることを示し、「y」は、指定したスタイルがループ内に位置する位置を示し、使用方法は以下の通りである.
<style type="text/css">
li:nth-child(4n+1) {background-color: yellow;}
li:nth-child(4n+2) {background-color: limegreen;}
li:nth-child(4n+3) {background-color: red;}
li:nth-child(4n+4) {background-color: white;}
</style>なお、「4 n+4」の表記は、「4 n」と略すことができる.上記の4つのセレクタは、このアプリケーションをサポートしています.
only-childとonly-of-typeセレクタ
nth-childとnth-last-childセレクタを次のように組み合わせて使用すると、親要素にサブ要素が1つしかない場合に使用するスタイルを指定できます.
<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<title>only-child </title>
<style type="text/css">
li:nth-child(1):nth-last-child(1) {background-color: red;}
</style>
</html>
<body>
<ul>
<li> </li>
</ul>
</body>
</thml>
上記の例のCSSスタイルは、次のように変更できます.
<style type="text/css">
li:only-child {background-color: red;}
</style>さらに、only-of-typeセレクタを使用して、「nth-of-type(1):nth-last-of-type(1)」という2つのセレクタ式フォーマットを組み合わせて、スタイルが一意のサブ要素にのみ機能するようにする方法も使用できます.