HTML - CSS - セレクタ - 属性セレクタ

クラウディア 
1. 概要
2. 基本形
3. 属性の有無
4. 属性値

1. 概要

 「input」タグに対して、設定しようとして。  「input」って、「radio」やら「text」やら、やたらたくさんあって、これらに全部設定されちゃうと、それはそれで困っちゃう。  それを解消するのが、属性セレクタになります。  本ページは、下記のサイトを参考にさせていただきました。
属性セレクター - CSS: カスケーディングスタイルシート | MDN」
「input 要素のスタイルを属性値で指定し分ける-ウェブ制作チュートリアル

2. 基本形

 基本形は、下記の形式になります。

タグ[属性]
{
	プロパティ: プロパティ値;
}

タグ[属性=属性値]
{
	プロパティ: プロパティ値;
}

3. 属性の有無

 例題の形式をわたしは、使用したことがないのですが、参考サイトには、こういう風に提示されていました。

a[title]
{
	color: purple;
}
 これは、「title」という属性を持つ、「a」タグなんですって。

4. 属性値

 でまぁ、これはよく使う。  すなわち

input[type="submit"]
{
	text-align: center;
}
 この場合、「input」タグの、「type」属性が、「submit」のもの、いわゆる、ボタンに対して設定するわけです。  この「[attr=value]」は、下記の構文があるようです。
 構文    意味    備考 
[attr=value] attr という属性の属性値が value であるもの
[attr~=value] attr という属性の属性値が value であるものを空白で区切って複数指定
[attr^=value] attr という属性の属性値が value で始まるもの
[attr$=value] attr という属性の属性値の末尾が value で終るもの
[attr*=value] attr という属性の属性値が value という文字列を含むもの

 実は、他にもありますが、わたしのよう理解できないものは省略しています。

earthcar(アースカー)