【初心者CSS】属性クラスタの書き方まとめ

属性クラスタです。
「ある属性が入っている要素だけスタイルを適用」というやつです。

わたしはあんまり使わないけどたまに使う…的なやつです。

HTMLの「要素」と「属性」と「属性値」をおさらい

はじめにやっとけって感じはありますがおさらい。
「要素」と「属性」と「属性値」です。

たとえば。

pが要素、classが属性、noteが属性値です。
この要素にnoteというクラスをつけます、という意味になりますね。
「なにに（要素）」、「なにを（属性）」、「どうする（属性値）」って感じです。

これだと「ここに画像、その画像は「image.png」、代替テキストは「サンプル画像」、横幅は「100px」、高さは「100px」で表示」ってことになってます。

これは「これリンク、アドレスは「http://www.nullllog.com」、フレームは別ウィンドウでね」ってことになります。

ついでにCSSのセレクタもおさらい

CSSは「セレクタ｛プロパティ：値；｝」です。
これは「p、色は赤ね！」と言っています。

【初心者CSS】属性クラスタの書き方

X[属性]

ある属性を持つ要素Xに対してスタイルを指定。
たとえばこんなhtmlがあるとして。

<p>テキストテキストテキスト</p>
<p class="test">テキストテキストテキスト</p>
<p class="sample">テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>

こんなふうにCSSを書くと。

p[class]{ background-color: plum; }

こうなります。

「class」が付いているところにスタイルが適用されました。

あ、属性とカッコの間はスペースナシで書いて下さいね。

X[属性名=”属性値”]

指定の属性が指定の値を持つ場合の要素Xにスタイルを指定。

HTML

<p>テキストテキストテキスト</p>
<p class="sample01">テキストテキストテキスト</p>
<p class="sample02">テキストテキストテキスト</p>
<p class="sample03">テキストテキストテキスト</p>

CSS

p[class="sample02"]{ background-color: plum; }

これと疑似要素を応用すると、外部リンクのときはアイコンをつける、みたいなやつができますね。

CSSはこんなかんじですね。

a[target="_blank"]::after{
content: "\f08e";
font-family: FontAwesome;
display: inline-block;
margin-left:3px;
}

X[属性名~=”属性値”]

複数のクラスを指定している場合など、属性値が2つ以上ある場合はX[属性名~=”属性値”]で書いて下さいね。
イコールの前に「~」をつければOK。

HTML

<p>テキストテキストテキスト</p>
<p class="sample01 plum">テキストテキストテキスト</p>
<p class="sample02 big">テキストテキストテキスト</p>
<p class="plum">テキストテキストテキスト</p>

 
CSS

p[class~="plum"]{ background-color: plum; }

こうなります。

X[属性名^=”文字列”]

指定文字列から始まる要素にスタイルを適用。
これけっこう便利なんですよ。
クラスに連番ふるときとかありますからね。

属性値が「sample」で始まる場合にスタイルをあててみます。

HTML

<p>テキストテキストテキスト</p>
<p class="test">テキストテキストテキスト</p>
<p class="sample01">テキストテキストテキスト</p>
<p class="sample02">テキストテキストテキスト</p>

CSS

p[class^="sample"]{ background-color: plum; }

X[属性名$=”文字列”]

指定文字列で終わる要素にスタイルを適用。

属性値が「02」で終わる場合にスタイルをあててみます。

HTML

<p>テキストテキストテキスト</p>
<p class="test">テキストテキストテキスト</p>
<p class="sample01">テキストテキストテキスト</p>
<p class="sample02">テキストテキストテキスト</p>

CSS

p[class$="02"]{ background-color: plum; }

X[属性名*=”文字列”]

指定文字列を含む要素にスタイルを適用。
ワイルドカード的な。

属性値に「ampl」を含む場合にスタイルをあててみます。

HTML

<p>テキストテキストテキスト</p>
<p class="test">テキストテキストテキスト</p>
<p class="sample01">テキストテキストテキスト</p>
<p class="sample02">テキストテキストテキスト</p>

CSS

p[class*="ampl"]{ background-color: plum; }

【初心者CSS】属性クラスタの書き方　まとめ

複数のクラスに同じスタイルを指定する場合にカンマ区切りで書きがちなんですが、属性クラスタ使えるようになるとその手間が要らなくなるんですよね。