【070-480】試験対策その2-3 CSS3のセレクターとスタイル プロパティ | P1

CSS3 のセレクターとスタイル プロパティを中心に学習します。

（CSS＝カスケーディング・スタイル・シート）

Selectors

Combinators

Color properties

Text properties

Box properties 

CSSの役目はHTMLをどう見せるか指定すること

選んで書式を設定する、という考え方。

選ぶのが「Selectors（セレクター）」。Selectorsの種類。

type selectors

.class selectors

#id selectors

[attribute] selectors

:pseudo-cpass an ::pseudo-element selectors

the universal selectors

selector chains

type selectors…要素（≒タグ）で選ぶ

ex)

table {color:red;}…tableタグ内の文字が赤くなる

.class selectors…class属性で選ぶ

ex)

.fancy {color:red;}…class="fancy"のタグ内の文字が赤くなる

合わせ技

ex)

div.fancy　…div要素のfancyクラスを対象にする

#id selectors…idで選ぶ

classは形容詞、要素の状態。idは固有の値、特定の要素を表す。

ex)

#loren {color:red;}…idが「loren」の要素を対象とする

[attribute] selectors…属性で選ぶ

ex)

[data-author="psmith"] {color:red;}…data-authorが「psmith」の要素を対象とする

[data-author$="smith"]…「smith」で終わる

[data-author^="smith"]…「smith」で始まる

[data-author*="smith"]…「smith」を含む

セレクタ・チェイニング

table,ul {color:red;}　…　どちらかのセレクタに一致する要素はすべて赤になる

h1,h2,h3,h4. {color:red;}　…　前ヘッダ要素を対象とする

疑似要素にはコロンを二つ「::」

ex)

p::first-letter {color:red;}…p要素の最初の一文字だけを赤色に

p::first-line {color:red;}…p要素の最初行だけを赤色に

コンビネータはセレクタを組み合わせる方法

#Div1 div {color:red;}…idがDiv1の要素の中の「div」要素を赤くする。直接の子孫でなくても構わない。

#Div1 > div {color:red;}…#Div1の直接の子要素divが対象。孫要素はNG。

一般兄弟

ul ~ div {color:red;}…ul要素の後にあるdiv要素を対象とする

ul + div {color:red;}…ul要素と弟関係にあるdiv要素を対象とする

疑似クラス

li:first-child {color:red;}…リストの最初の子要素を対象とする

li:nth-child {color:red;}…リストの指定の順番の子要素を対象とする

li:nth-child(3) {color:red;}…リストの3番目の子要素を対象とする

25分はなかなか長い……！