要素名 [属性|="属性値"]{～}

要素名に続けて[属性|="属性値"]を記述してセレクタとすると、指定した属性と、指定した文字列、または「指定した文字列-」で始まる属性値を持つ要素を対象にスタイルを適用します。

言語コードを判別する目的で使用することが想定されており、例えば、アメリカ英語を表す「en-US」とコックニー英語を表す「en-cockney」などを同時に対象として指定できます。

セレクタの使用例

以下の例では、言語コードがenで始まる言語のWebサイトへリンクしたa要素を対象にスタイルを適用し、リンクのテキストをイタリック体で表示しています。

CSS

a[hreflang|="en"] {
  padding-right:15px;
  font-style: italic;
}