継続は力なり＃10

2020年3月8日 07:00

属性セレクタ

特定の属性が指定されてる要素・特定の属性に特定の値が指定されてる要素
が適正対象

要素[属性名]
「属性名」の属性が指定されてる

要素[属性名="属性値"]
「属性名」の属性に「属性値」が指定されてる
（値全体が一致）

要素[属性名~="属性値"]
「属性名」の属性に「属性値」の値が指定されている
（値全体か半角スペース区切りの値のどれかと一致）
（「属性名」が「class」の場合はクラスセレクタと同じ）

要素[属性名|="属性値"]
「属性名」の属性に「属性値」の値が指定されてる
（値全体かハイフン区切りの値の前半が一致）
（言語コード「en-US」などに使用）

要素[属性名^="属性値の始め"]
「属性名」の属性の値が「属性の始め」で始まる

要素[属性名$="属性値の終わり"]
「属性名」の属性の値が「属性の終わり」で終わる

要素[属性名*="属性値の一部"]
「属性名」の属性の値が「属性値の一部」を含む

その他の擬似クラス

要素: link
要素: visited
要素: hover
要素: active

以外の擬似クラス

要素:nth-child（式）
先頭から○個目の要素から△個おきに適用

要素nth-last-child（式）
最後から○個目の要素から△おきに適用

要素nth-of-type（式）
先頭から○個目の要素から△個おきに適用（同じ要素名の要素のみ対象）

要素nth-last-of-tyoe（式）
最後から○個目の要素から△個おきに適用（同じ要素名の要素のみ対象）

それ以外↓

上記4つの要素にある「式」について

式＝○個目から△個目おき
基本的には「an+b」という形式
「n」＝０から１ずつ増える整数
「a」と「b」の部分に具体的な整数を入れる
「a」と「b」には負の整数や０でも指定できる
（例「3n+0」＝「3n」、「1n+3」＝「n+3」、「0n+3」＝「3」）

例として「:nth-child(2n+1)」の指定の場合
最初は「n」は「０」なので「2×0+1=1」
次は「n」は「１」なので「2×1+1=3」
「n」が「２」になると「2×2+1=5」

というように奇数個目（１個から２個おき）の要素に適用
偶数個目に適用したい場合は
「:nth-child(2n+0)」または「:nth-child(2n)」と書く

奇数個目
「:nth-child(2n+1)」
偶数個目
「:nth-child(2n)」

また「an」の部分を省略して「b」だけを指定
「:nth-child(3)」だと３個目
「:nth-child(5)」だと５個目
の要素だけに適用
単に「奇数個目」・「偶数個目」を表す場合は「odd」・「even」のキーワードも指定可能
これらのセレクタは、表の色を１行置きに色を変える場合に使用

例

HTML

<p>これはp要素です</p>
<p>これはp要素です</p>
<p>これはp要素です</p>
<p>これはp要素です</p>
<p>これはp要素です</p>
<p>これはp要素です</p>

CSS

p:nth-child(odd) {               /*奇数個目*/
   color: white;
   background-color: gray;
}
p:nth-child(even) {              /*偶数個目*/
   color: white;
   background-color: silver;
}
p:nth-child(6) {
   color: white;
   background-color: red;
}

擬似要素

タグのつけられていない範囲（HTMLの要素になっていない部分）に対して
CSSを適用するためのセレクタ
例として
ある要素に１文字目だけにCSSを適用
HTML上では存在していないコンテンツを追加してその部分の表示指定
ができる
以下が擬似要素に分類されるセレクト

・要素::first-line
ブロックレベル要素の１行目

・要素::first-letter
ブロックレベル要素の１行目

・要素::before
要素内容の先頭にCSSで要素内容を追加

・要素::after
要素内容の末尾にCSSで要素内容を追加

※「::first-line」と「::first-letter」はブロックレベル要素のみに適用が限定される

その他の結合子

複数のセレクタを半角スペースで区切ることで
「左側のセレクタの適用対象」の中の「右側のセレクタの適用対象」
だけを適用対象とすることができる
ここでの半角スペースと同様に適用対象を絞り込める結合子は以下がある

・セレクタ1 > セレクタ2
「セレクタ1」の直接の子要素である「セレクタ2」の要素

・セレクタ1 + セレクタ2
共通の親要素を持つ要素の中で「セレクタ1」の直後に現れる「セレクタ2」の要素

・セレクタ1 ~ セレクタ2
共通の親要素を持つ要素の中で「セレクタ1」よりも後に現れる「セレクタ2」の要素