属性セレクタ｜CSSセレクタ｜CSS－havin' a coffee break

＃

属性セレクタ

“属性セレクタ(Attribute selectors)”はスタイルを適用する対象を要素に指定された属性、もしくは属性と値によって選択するためのセレクタです。

属性セレクタはCSS適合名である属性名で、角括弧(“[”と“]”)で囲まれます。



[〚属性名〛] { ... }



<〚要素名〛 〚属性名〛="〚値〛">

また、属性名の後にイコール(“=”)を挟んで属性の値を記述することで特定の属性値が指定された要素を選択することができます。



[〚属性名〛=〚値〛] { ... }



<〚要素名〛 〚属性名〛="〚値〛">

“〚値〛”は“CSS Syntax Module”で定義されている“<ident-token>”、もしくは“<string-token>”の構文に準拠したものでなければなりません。

また、HTML文書にスタイルを適用する場合、基本的に属性値は英字の大文字と小文字は区別されます。

＃

部分一致する属性値の選択

複数の値のうち一つに一致

イコール(“=”)の直前にチルダ(“~”)がある属性セレクタは属性の値がホワイトスペース(半角スペース(“ ”)、タブ文字など)区切りのリストである場合(属性値が複数指定されている)にその中の値の一つが“〚値〛”と正確に一致する属性を表します“〚値〛”に。ホワイトスペースが含まれる場合や省略された場合はそのセレクタは何も意味しません。



[〚属性名〛~=〚値〛] { ... }

前方一致

イコール(“=”)の直前にキャレット(“^”)がある属性セレクタは“〚値〛”からはじまる値を持つ属性を表します。“〚値〛”が省略された場合はそのセレクタは何も意味しません。



[〚属性名〛^=〚値〛] { ... }

また、イコール(“=”)の直前に縦線(“|”)がある属性セレクタは“〚値〛”と正確に一致する値、もしくは“〚値〛”の直後にハイフン(“-”)が続く値を持つ属性を表します。“〚値〛”が省略された場合はそのセレクタは何も意味しません。



[〚属性名〛|=〚値〛] { ... }

後方一致

イコール(“=”)の直前にドル記号(“$”)がある属性セレクタは“〚値〛”で終わる値を持つ属性を表します。“〚値〛”が省略された場合はそのセレクタは何も意味しません。



[〚属性名〛$=〚値〛] { ... }

部分一致

イコール(“=”)の直前にアスタリスク(“*”)がある属性セレクタは“〚値〛”が含まれる値を持つ属性を表します。“〚値〛”が省略された場合はそのセレクタは何も意味しません。



[〚属性名〛*=〚値〛] { ... }

＃

大文字と小文字の区別

属性名と値の英字の大文字と小文字が区別されるかどうかはスタイルが適用される文書が記述されている言語の定義に依ります。

HTMLでは属性名は大文字と小文字が区別されませんが、値は英字の大文字と小文字が区別されます。例えば、“WAAA”と“waaa”は別の値として扱われます。ただし、一部の属性名は値の大文字と小文字が区別されません。

HTMLで大文字と小文字が区別されない属性名

accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type
valign
valuetype
vlink

属性セレクタでは“i”識別子(“case-Insensitive”)もしくは“s”識別子(“case-Sensitive”)を使用することで文書の記述言語の定義にかかわらず英字と大文字と小文字を区別するかどうかを明示することができます。

右括弧(“]”)の直前に“i”(もしくは“I”)を挿入すると“〚値〛”は大文字と小文字を区別せずに比較することを明示します。



[〚属性名〛=〚値〛 i]

右括弧(“]”)の直前に“s”(もしくは“S”)を挿入すると“〚値〛”は大文字と小文字を区別せずに比較することを明示します。



[〚属性名〛=〚値〛 s]

＃

名前空間による選択

属性セレクタはCSS適合名なので選択する属性を名前空間で絞り込むことができます。

CSS適合名は縦線(U+007C、“|”)を挟んだ定義済みの名前空間の接頭辞とローカル名(要素名や属性名)からなります。名前空間の接頭辞は“@namespace”ルールによって定義されます。



特定の名前空間に属する特定の属性

〚名前空間〛|〚属性名〛 { ... }





どの名前空間にも属さない特定の属性

|〚属性名〛 { ... }

〚属性名〛 { ... }





名前空間にかかわらず“〚属性名〛”という名前の属性

*|〚属性名〛 { ... }

未定義の接頭辞を付加した属性セレクタは無効なセレクタとして扱われます。

＃

使用例



blockquote[lang="ojp"] {

 background-color: #f6bfbc; /*■*/

 font-family: "游明朝","ヒラギノ明朝",serif;

 font-weight: bold;

 
}





blockquote[lang="ja"] {

 background-color: #c1e4e9; /*■*/

 
}





blockquote[lang|="zh"] {

 background-color: #b9d08b; /*■*/

 font-style: italic;

 
}





p[id^="part"] {

 background-color: #d6c6af; /*■*/

 
}