CSSの記述法
例
p {color:red;}
セレクタ
具体的に、どの箇所にCSSを適応させるのかを明確に指示させるもの。
主なセレクタ
ユニバーサルセレクタ *
セレクタに、*(アスタリスク)を指定すると、HTML文書の全ての要素にスタイルが適用される。
* { background-color: #0000ff; }
タイプセレクタ
タイプセレクタとは、HTMLファイルのp,h1,h2など各要素に対するセレクタである。
指定した要素に、スタイルが適用される。
h1 { background-color: #0000ff; }
クラスセレクタ
HTMLに、class 属性を指定した要素に、スタイルを適用する。
大文字と小文字は、区別される。
HTML
先頭を数字で始めることはできない。
CSS
[要素名.class属性名]と記述するが、要素名を省略できる。
[要素名.class属性名]の場合
その要素限定に適応するclass属性となる。
要素名を省略した場合。.class属性名
どの要素でも利用可能な汎用class となる。
HTML
<p class=”points”>クラスセレクタ</p>
CSS
.points { background-color: #0000ff; }
.classA.classB
classAであり、かつclassB を表わす。
IDセレクタ
HTML内でid属性が指定されている要素にスタイルを適用する。
id属性
リンクの移動先やJavaScriptで要素を特定する場合にも機能する。
- 1ページ内に1つしか設定できない。
- 数字で始めることはできない。
- 大文字と小文字を区別する。
1.<section id=”Profile”>~</section>
2.<section id=”profile”>~</section>
1と2では、同じとは認められない。
CSSでは、[要素名#id名」とするが、単に、#id 名でもよい。
class 名も含めて、後のサイト編集などを行うコーダーのためにも、パッと見てわかる、誰でもわかりやすい名前を付けるよう心懸ける。
HTML
<p id=”contact”>IDセレクタ</p>
CSS
#contact { background-color: #0000ff; }
CSS
#menu li { }
この場合、menuというID名が付けられた要素の下にあるli要素にCSSを適応する。
CSS
ul#menu
menu というIDセレクタ名を付けられたul要素。
属性値セレクタ
input[type=”属性値”]
セレクタの組み合わせ
子孫セレクタ 親要素 子要素
親要素の後に、子要素を半角スペースを入れて、配置。
左のセレクタの適用対象の要素に含まれる右のセレクタの適用対象に、CSS が適用される。
親要素 子孫要素
半角スペースでセレクタを繋ぐ。
ex) [div p] div要素内のp要素に、スタイルが適用される。
[div p strong …] というように、要素を絞り込むことができる。
<div> <p>陸上競技</p> <p><span>水泳</span></p> <span>マラソン</span> </div>
div span { background-color: #0000ff; }
この場合、「水泳」と「マラソン」に、背景色がつく。
要素セレクタclass セレクタ
要素セレクタに続けて、class セレクタを記述すると、「その要素の中の、その class 名がついたもの。」に、CSSを適用できる。
セレクタ,セレクタ
セレクタをカンマで区切り、並列する。
複数のセレクタに、同時に、スタイルを適用させることができる。
子供セレクタ a>b
特定の親要素の子要素にのみ、スタイルを適用する。
親要素の後に、「>」を付けて指定する。
main>p { background-color: #0000ff; }
子孫セレクタでは、子要素、孫要素全てに指定されてしまうのに対し、子供セレクタは、指定した要素の直下の子要素のみを指定し、孫要素以下の要素には、スタイルが適応されない。
隣接セレクタ a+b
同じ親要素を持ち、隣接する兄弟要素を同時に設定するセレクタ。
要素間に、「+」を付けて、複数の要素を指定する。
header + main { background-color: #0000ff; }
疑似クラス
ある状況の要素を対象にした限定的なセレクタを作るためのもの。
サイトに、動的な効果を与えることができる。
[要素名:状態]という形で記述する。
[:] の前後にスペースを入れない。
:link | 未訪問のリンク。 |
:hover | リンクにカーソルが重なっている時。 |
:active | リンクをクリックしている時。 |
:visited | 訪問済みのリンク。 |
:focus | リンクにフォーカスしている時。 |
:first-child | 要素の中の最初の子要素 |
nth-child | n 番目の子要素 |
:lang() | 要素にその言語コードが指定されている場合 |
CSS3で追加されたセレクタ
IE9以上で利用できる。
間接セレクタ E`F
兄要素の後に続く全ての要素Fに、スタイルを設定するセレクタ。
CSS3 疑似クラス
構造疑似クラス | E:last-child | 最後の子要素であるE要素 |
E:nth-child(n) | n番目の子要素であるE要素 | |
E:nth-last-child(n) | 最後からn 番目の子要素であるE要素 | |
E:only-child | 唯一の子要素であるE要素 | |
E:first-of-type | 最初のE要素 | |
E:last-of-type | 最後のE要素 | |
E:nth-of-type(n) | n 番目のE要素 | |
E:nth-last-of-type(n) | 最後から n 番目のE要素 | |
E:only-of-type | 唯一のE要素 | |
:root | 文書のルート要素(html 要素) | |
E:empty | 子を持たないE要素 | |
否定疑似クラス | E:not(s) | セレクタ s ではない |
ターゲット疑似クラス | E:target | ターゲットになるE要素 |
UI 疑似クラス | E:enabled | 入力可能状態なE要素(UI 要素のみ) |
E:disabled | 入力不可状態なE要素(UI 要素のみ) | |
E:checked | 選択された状態のE要素(UI 要素のみ) |
疑似要素
疑似要素とは?
実際には、要素が存在しないのに、擬似的に要素が存在するかのようにみなし、スタイルを設定するセレクタ。
例えば、要素の一部分を独立した要素として取り出したり、実際には存在しない要素を作り出したりすることができる。
疑似要素の記述の形式
:: 疑似要素
:(コロン)を2つ続けて記述する。
::first-line | 要素の最初の1行にスタイルを適用 |
::first-letter | 要素の最初の1文字にスタイルを適用 |
::before | 要素の前にコンテンツを挿入 |
::after | 要素の末尾にコンテンツを挿入 |
::selection | ユーザーが選択した領域にスタイルを適用 |
::hover | カーソルを要素の上に持ってきた場合のスタイルを適用 |
::visited | 訪問済みのリンク要素のスタイルを適用 |
CSS3からは、先頭のコロンが1つから2つになった。
::before 疑似要素と ::after 疑似要素でコンテンツを生成させるためには、content プロパティを使う必要がある。
content プロパティでは、テキスト、画像、空のボックスを生成することが可能である。
生成された ::before 疑似要素と ::after 疑似要素は、通常の要素のように、色や背景、サイズ指定などができる。
情報としてではなく、あくまで装飾要素として用いる。
span 要素
文字要素の何もない領域に、スタイル要素を追加する。
そして、その span 要素に、class属性や id属性を追加することで、個別にスタイル設定していく。
セレクタの優先度
同じ場所の同じプロパティに対し、異なる値が指定された場合、「あとから記述されたものを優先」して、値が上書きされる。
ほかに、セレクタの詳細度によって、優先順位が変わってくる。
セレクタの詳細度
セレクタがどれだけ細かく指定されているかを示すもの。
詳細度が同じセレクタの場合
あとから記述されたセレクタが優先される。
詳細度が異なるセレクタの場合
記述され箇所に関わらず、詳細度の高いセレクタが優先される。
詳細度の高低の判定
基本法則
- [タグ<class < id ] の順に詳細度は高くなり、優先順位は上がる。
- 「外部参照<内部参照<インライン指定」の順に詳細度は高くなり、優先順位は上がる。
- 子孫セレクタ等でセレクタが複数になっている場合は、「より詳しく」指定されている方が優先される。
!important
プロパティの後ろに、[!important] と記述すると、詳細度を無視し、その指定が最優先される。
.main ( background-color: red !important; }
ただし、乱用は避けること。
【参照】
[amazonjs asin=”4797354437″ locale=”JP” tmpl=”Small” title=”Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)”]
[amazonjs asin=”4798142204″ locale=”JP” title=”HTML5&CSS3標準デザイン講座”]
One thought on “主なセレクタの指定方法”